{"id":171,"date":"2024-02-25T08:26:22","date_gmt":"2024-02-25T08:26:22","guid":{"rendered":"https:\/\/www.acugis.com\/gis-tutorials\/?page_id=171"},"modified":"2024-02-25T08:28:52","modified_gmt":"2024-02-25T08:28:52","slug":"basic-leaflet-demo","status":"publish","type":"page","link":"https:\/\/www.acugis.com\/gis-tutorials\/web-mapping-with-leafletjs\/basic-leaflet-demo\/","title":{"rendered":"Basic Leaflet Demo"},"content":{"rendered":"\n

This is a basic Leafletjs html demo file that we will be building on in subsequent tutorials.<\/p>\n\n\n\n

This basic map displays an OpenStreetMap base layer.<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t<base target=\"_top\">\n\t<meta charset=\"utf-8\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t\n\t<title>Basic Leaflet Map<\/title>\n\t\n\t<!-- Leafletjs and CSS -->    \n\t<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n\t\n    \t<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/>\n\n\t<!-- Inline CSS for map -->\n\t\n\t<style>\n\t\thtml, body {\n\t\t\theight: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.leaflet-container {\n\t\t\theight: 80%;\n\t\t\twidth: 80%;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t}\n\t<\/style>\n\n\t\n\t<\/head>\n\t\n\t<body>\n\n\t<div id=\"map\"><\/div>\n\t\n\t<script>\n\t\t\n\t\/\/ Add OpenStreetMap basemap\n\t\tvar map = L.map('map').setView([37.0902, -95.7129], 4);\n\n\t\tvar osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n\t\t\tmaxZoom: 19,\n\t\t\tattribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n\t\t}).addTo(map);\n\n\t\n\t<\/script>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
This file uses the leafletjs javascript and css files via a CDN url.<\/p>\n\n\n\n
<!-- Leafletjs and CSS -->    \n<script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\" integrity=\"sha256-20nQCchB9co0qIjJZRGuk2\/Z9VM+kNiyxNV1lvTlZBo=\" crossorigin=\"\"><\/script>\n    \n<link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" integrity=\"sha256-p4NxAoJBhIIN+hmNHrzRCf9tD\/miZyoHS5obTRR9BMY=\" crossorigin=\"\"\/><\/pre>\n\n\n\n
You can also download the files and serve them locally.<\/p>\n\n\n\n
The map div is used to display the generated html content:<\/p>\n\n\n\n
<div id=\"map\"><\/div><\/pre>\n\n\n\n
We then initialize the map and set the default view:<\/p>\n\n\n\n
var map = L.map('map').setView([37.0902, -95.7129], 4);<\/pre>\n\n\n\n
Finally, we add an OpenStreetMap layer to serve as our basemap:<\/p>\n\n\n\n
var osm = L.tileLayer('https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png', {\n            maxZoom: 19,\n            attribution: '&copy; <a href=\"http:\/\/www.openstreetmap.org\/copyright\">OpenStreetMap<\/a>'\n        }).addTo(map);<\/pre>\n\n\n\n
If we open the file in a browser, we see it displayed as below:<\/p>\n\n\n\n
\"Create<\/figure>\n\n\n\n
<\/p>\n\n\n\n
In subsequent tutorials, we will be adding data, layers, controls, styling, and plugins.<\/p>\n","protected":false},"excerpt":{"rendered":"
This is a basic Leafletjs html demo file that we will be building on in subsequent tutorials. This basic map displays an OpenStreetMap base layer. This file uses the leafletjs javascript and css files via a CDN url. You can also download the files and serve them locally. The map div is used to display … <\/p>\n
Continue reading “Basic Leaflet Demo”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":166,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":6,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/171\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/171\/revisions\/178"}],"up":[{"embeddable":true,"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/pages\/166"}],"wp:attachment":[{"href":"https:\/\/www.acugis.com\/gis-tutorials\/wp-json\/wp\/v2\/media?parent=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}