More

Displaying GeoJSON data in Leaflet?

Displaying GeoJSON data in Leaflet?


I am trying to access and display some data in a GeoJSON layer.

Can someone take a look at my code below and suggest what I need to do to make it work?

The result of the console.log is:

Object {latlng: o.LatLng, layerPoint: o.Point, containerPoint: o.Point, originalEvent: MouseEvent, type: "click"… }


var wrldbndryData; function wrldbndryStyle(feature) { return { weight: 2, opacity: 0.1, color: 'black', fillOpacity: 0.1 }; } function highlightFeature(e) { var layer = e.target; layer.setStyle( { weight: 9, color: '#666', fillOpacity: 0.5 }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } } function resetHighlight(e) { wrldbndryData.resetStyle(e.target); } function showFeature(feature) <-- *** THIS IS WHERE I AM TRYING TO ACCESS THE GEOJSON DATA ***** { console.log(feature); if (feature.properties && feature.properties.NAME) { $('#sidecol').html('
COUNTRY INFO
' + '
' + feature.properties.NAME + ''); } } function eachFeature(feature, layer) { layer.on( { click: showFeature, mouseover: highlightFeature, mouseout: resetHighlight }); } wrldbndryData = L.geoJson(wrldbndry, { style:wrldbndryStyle, onEachFeature:eachFeature }); wrldbndryData.addTo(map);

theshowFeaturefunction that you attached to click event receive a MouseEvent object as argument.

To get the layer from a MouseEvent object, you can use its target property. And if the layer was created using geojson,then that layer has a property call feature with the data.

try this:

function showFeature(e) { var layer = e.target; var feature = layer.feature; console.log(feature); if (feature.properties && feature.properties.NAME) { $('#sidecol').html('
COUNTRY INFO
' + '
' + feature.properties.NAME + ''); } }

The Open Digital Archaeology Textbook

A web map is a geographic visualization that is supported by computational infrastructures. This form of mapping is fundamentally powered by the Web Axismap, 2018. It should come as no surprise that the ubiquity of web maps correlates with the development of Web 2.0, a marked transformation in the way that that we engage with the Internet (Aced 2013) .

As Darcy DiNucci remarked in 1999, content loading into a browser as ‘static screenfuls is only an embryo of the Web to come’ (DiNucci 1999) . Web 2.0, thus is characterized by ‘interactivity’, ‘two-way communication’ often through devices that are ‘Internet-enabled’ and a greater awareness amongst developers of ‘user experience’ and ‘interface’. These interests are correlated with the diversification of screen sizes on mobile hand-held devices such as smart phones, tablets and laptops, all of which require responsiveness, appropriate scaling for size and interaction primarily through touch and swipe. Whereas the first iteration of the Web required advanced training to create a website, Web 2.0 as is often claimed, requires little or no expert knowledge to make a Web-ready ‘thing’ such as a website, a blog, or a Wiki. This is the context in which web mapping, that is the Web-based visualization of geographic information became popularized.

One can argue that web maps narrow the distance between professional map makers and non-specialist makers yet some scholars have expressed concerns on the quality of geographic data that are now frequently and widely shared on the Web (M. van Exel 2010) . Collaborative online platforms such as OpenStreetMap, for example, have drawn attention to the social dimension of knowledge making how accurate is information that a lay-person or particular interest community has uploaded? Can we make real-world decisions based on those data? Begin et al. suggest that volunteered geographic information reflects ‘contributors’ motivation and individual preferences in selecting mapped features and delineating mapped areas’, a situation that can enable scholars in examining and assessing the quality of those data (Daniel Bégin 2013) .

For archaeologists, web maps and publishing geographic information present challenges and opportunities. Archaeologists are aware that the data they collect through field studies often contain sensitive location information. These concerns are sometimes heightened in contexts where there are tensions between archaeologists and local communities or ethnic and linguistic minorities who might be socially, politically and economically marginalized in that society. Archaeologists often express concern that publishing location information on sites of archaeological and historical interest can facilitate, if not result in, the destruction of those sites through looting. Looting and illegal trafficking of archaeological artefacts and human bones is an issue observed in many places (Neil Brodie 2001, Huffer and Graham (2017) ) .

Recent developments in geovisual analytics that leverage the spatial dimension in data suggest that scholars can work with, and meaningfully analyze these data even where they contain sensitive location information (G. Andrienko et al. 2007) . This situation opens enormous opportunities for archaeologists to develop tools that are appropriate for meaningful analysis and publication of archaeological data. In the next section, we build upon the ethos of ‘openness’ and present an overview of map services, followed by a guide to making an interactive web map with the Leaflet library. For an example of a Leaflet web map, check out Open Context.

3.5.1 Overview of Map Services

Tiled map service and Web Map Service are two forms of Web-based mapping. A WMS is an interface that enables us (the clients) to request specific maps i.e. visual representations of geographic information from a geospatial database. The WMS server is called via a Universal Resource Link (URL) on an Internet-enabled desktop GIS. A request typically consists of the geographic layer (e.g. theme) and geographic area of interest. The response to a request results in geo-registered map images that are displayed and queried within a browser. Because the map is dynamically drawn upon request, and because the server typically uses the most current information from several layers in the geospatial database, WMS maps tend to load slowly. Toporama is an example of a WMS server for Canadian topographic themes. (add image for WMS architecture?)

Tile map services such as TillMill Project, OpenStreetMap, CartoDB, and Stamen all use one or more vector layers that have been rasterized into an image. This rasterized image is divided into 256 x 256 adjacent pixel images or ‘tiles’. This is usually the base layer in a web map.

Each tile is an image on the Web, which means that you can link to it. For example, the following URL points to a specific tile on the Web:

The three elements in the URL are: 1. tile.openstreetmap.org , the tile server name 2. 7 , the zoom level or z value of the tile and finally 3. 63/42 , the x and y values in the grid where the tile lives

The z value has a range between 0 and 21, where 21 returns a tile with greatest detail (and smallest sized tile).

Once generated, the set of tiles are stored on disk, ready to be distributed rapidly to large numbers of simultaneous requests. Tiled maps load quickly precisely because they are pre-generated. They shift attention to map aesthetics and smooth map navigation, trading in functionality such as layer order, map scale and projection. Alex Urquhart maintains a list of tile services.

Data layers are typically added on top of the base layer. Data layers can be points, lines and polygons. These data layers are saved as GeoJSON, a format designed for representing on the Web, geographic features with their non-spatial attributes.

3.5.2 Making a web map with Leaflet

Leaflet is a JavaScript library developed by Vladimir Agafonkin for use with tiled maps. Launched in 2008, Leaflet has become widely used in tile web mapping because the library’s low-barrier customization and interactivity with map elements, and because of its simplified setup when compared to a WMS served map. Moreover, Leaflet’s compatibility with other Web 2.0 technologies and code-sharing platforms such as GitHub has encouraged an active community of ‘makers’.

In keeping with this e-book’s ethos of ‘openness’ and with a motivation to encourage low-cost and low-barrier web mapping, below is an outline to get started on our own interactive web map with Leaflet. We will need:

  1. some point data, ideally geocoded (lat/long) data saved as CSV
  2. a text editor installed on local machine, such as Atom
  3. a hosting service, such as GitHub (public account)
  4. a tile map service, such as OpenStreetMap, MapBox (free account) or other
  5. a curious you

3.5.3 Exercises

Making a ‘digital thing’ can be exciting and intimidating, and yet seeing one’s creation on the Web can be gratifying. It is important to realize that much of the work to make that happen takes place on a local machine. Therefore, setting up a local environment with the tools we need is highly encouraged. We recommend installing a local web server such as MAMP for Macs or WampServer for Windows for regular use.

For this exercise, we’ll use Prepros, a temporary preprocessor application that reloads our local browser as we make changes to our HTML file, and enables us to see what’s happening without installing a dedicated web server.

3.5.3.1 A simple Leaflet web map

  1. Download web-map and unzip to a known location. Which files and folders do you see? It is helpful to see files and sub-folders within their hierarchical structure before we start editing. Bring the web-map folder into Atom. We do this by ‘Add a Project Folder’.

  1. Locate the file named index.html and open it. What do you see in the file? The first line tells us that this document written in html, a language for creating web pages.

Go ahead and change the title

  1. We now want to have a look at our web page on a local browser. Let’s fire up Prepros (this may take a few minutes) to get a preview. Add the web-map folder as a project, either by drag and drop or use the + at the bottom left of the Prepros window.

Right click on the folder to ‘Enable Live Preview’. Then click on the globe icon to see the web page in the browser.

  1. On the index.html , locate the tag <head> and <body> . In the anatomy of a web page, these sections are most important for creating and loading content.

Within our <head> section, we have added two tags, <link> and <script> to the Leaflet library. You will notice that the URL points to CDN or a Content Delivery Network. These are servers that host Web content based on our geographic location. In this case, we request a specific hosted CSS or Cascading Style Sheet for Leaflet and the Leaflet script that adds interactivity to the web map.

The CSS gives us pre-defined styles and elements to format the content of a webpage i.e. we get the look and feel of a Leaflet map. It includes fonts, size, colour, line spacing, and Leaflet elements like the map, and an icon for zoom.

It is key that that CSS loads before the script, and that both of them are within the <head></head> tags.

Your file should read this way at this stage:

  1. Next, in the <body> section of our web page, we add a <div> element that will contain a thing called map .

We then call the <script> and initialize our map using L.map .

.setView centers our web map on specific coordinates and at a particular zoom level. Change the coordinates and hit save. Have a look at the live preview. What do you see?

This code tells us the following: 1. https://.tile.openstreetmap.org , tile server we want, 2. 19 , the maximum zoom level, and 3. '&copy <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' the attribution for that tile provider

Take note of .addTo(map) that actually adds the layer to our web map, and the </script> closes this particular script. To load additional layers or attribute data, we would add our code within the tags <script></script> which we outline in the next subsection.

At this stage your html reads like this:

Congratulations! We have our first Leaflet map. Examine the map in the Prepros preview window.

3.5.3.2 Loading point data onto a Leaflet map

Now that we have a base map set up, we want to load some feature data i.e. points, lines, polygons, onto it. We have a few different ways to add feature data. They can be loaded as a Common Separated Value (CSV) file or a GeoJSON.

In this exercise, we will work with a GeoJSON, a small file (point-data.geojson) with about 20 potential excavation sites. The original CSV had four fields, all of which were converted into GeoJSON using an online tool here.

Fire up a text editor and examine the contents of point-data.geojson . What do you see? Take note of type, geometry, and properties. How many properties or attributes are there, what are they?

Next, open index.html . We will now add several lines of code that enable us to grab our GeoJSON data, load them and represent them as markers.

Locate the <head> tag, and the script for loading Leaflet. Below it, add a script called jQuery. This Javascript library is widely used to enable interactivity, animations, plug-ins and widgets. We load jQuery on our web page using the following code after Leaflet.js :

  1. We are now ready to add a few lines to get our GeoJSON (point-data.geojson). In the <body> section, let’s add the following code below your tile layer:

Save the file and preview it in the browser. Congratulations! We’ve added our own point feature data to a Leaflet map.

It would be great to have interaction beyond panning and zooming on our web map. One way is to add pop-ups to each of our markers that we can click on.

Locate pointToLayer which we called passed a function. We will create a variable called marker and bind a pop-up to each marker:

At this stage, your html will look similar to this:

  1. That’s it! We’ve created a web map with our own point data, and we have markers with pop-ups to click on.

3.5.4 Resources

Below are examples in archaeology that use Leaflet that you can try out, and that have repositories that you can fork for your own projects:

  1. The Digital Atlas of Ancient Egypt developed at the Department of Anthropology, Michigan State University: https://msu-anthropology.github.io/daea/

References

Aced, Cristina. 2013. “Web 2.0: The Origin of the Word That Has Changed the Way We Understand Public Relations.” International PR 2013 Conference. Images of Public Relations. https://www.researchgate.net/publication/266672416_Web_20_the_origin_of_the_word_that_has_changed_the_way_we_understand_public_relations.

M. van Exel, S. Fruijtier, E. Dias. 2010. “The Impact of Crowdsourcing on Spatial Data Quality Indicators.” In Proceedings of Giscience 2011, Zurich, Switzerland, 14–17 September 2010. https://www.researchgate.net/publication/267398729_The_impact_of_crowdsourcing_on_spatial_data_quality_indicators.

Daniel Bégin, Stéphane Roche, Rodolphe Devillers. 2013. “Assessing Volunteered Geographic Information (Vgi) Quality Based on Contributors’ Mapping Behaviours.” International Archives of the Photogrammetry, Remote Sensing and Spatial Information Sciences. https://www.int-arch-photogramm-remote-sens-spatial-inf-sci.net/XL-2-W1/149/2013/isprsarchives-XL-2-W1-149-2013.pdf.

Neil Brodie, Colin Renfrew, Jennifer Doole, ed. 2001. Trade in Illicit Antiquities: The Destruction of the World’s Archaeological Heritage. Cambridge: McDonald Institute for Archaeological Research.

Huffer, Damien, and Shawn Graham. 2017. “The Insta-Dead: The Rhetoric of the Human Remains Trade on Instagram.” Internet Archaeology. doi:https://doi.org/10.11141/ia.45.5.

Andrienko, Gennady, Natalia Andrienko, Piotr Jankowski, Menno-Jan Kraak, Daniel A. Keim, Alan MacEachren, and Stefan Wrobel. 2007. “Geovisual Analytics for Spatial Decision Support: Setting the Research Agenda.” International Journal of Geographical Information Science 21 (8): 839–57.


2 Answers 2

There are 3 ways in which you can do it.

1) Have a property called 'popup' for each feature in your geojson. If there is one the Leaflet will bind a popup to that feature with the contents equal to the value of the 'popup' property https://github.com/rstudio/leaflet/blob/master/javascript/src/methods.js#L493

The problem is if you don't have one and most geojson's won't have a 'popup' property, then you have to add on on the R side. i.e. convert geojson string to a list and iteratively add popup property to each feature and convert it back to geojson string.

2) Convert geojson to a sp object in R, and use the popup features of add(PolyLines/Polygons/Markers) etc. This is not a bad option as the sp object handling is way more elegant that geojson string or list.


Bermain dengan Leaflet GeoJSON

Leaflet sangat menjanjikan dan dapat Anda gunakan (dan lebih saya sarankan) untuk menggantikan Google Maps API. Ada banyak alasan untuk tidak lagi menggunakan Google dan beralih menggunakan Leaflet, seperti:

  • Leaflet bisa Anda host untuk LAN/localhost. Google Maps API walaupun bisa juga untuk itu, tetapi “melanggar” term of use (katanya).
  • Leaflet open source.
  • sila lihat webnya Leaflet untuk masih banyak lagi alasan.

Sebenarnya, contoh dari Leaflet sendiri sudah ada untuk GeoJSON, dan dapat Anda pelajari di sini:

dan POC dapat dilihat di sini:

Namun, berhubung saya mengajar di Kota Pekanbaru, tentu lebih enak mengajar mahasiswa dengan contoh langsung Kota Pekanbaru, bukannya Denver.

Permasalahan saat mengajarkan GIS dengan sample lokal (Indonesia), adalah kurangnya data / sumber yang dapat digunakan. Untuk itu, saya meng-export sebuah SHP yang saya dapatkan dari saudara di Pekanbaru yang berisi posisi kantor lurah di Pekanbaru. Keakurasian data saya tidak tahu, tapi untuk bermain-main dengan Leaflet: boleh lah.

Untuk dapat mengubah berkas SHP menjadi GeoJSON, Anda cukup menggunakan QGIS. Dari QGIS, layer kantor_lurahan dapat Anda klik kanan lalu pilih simpan sebagai.

Jangan lupa untuk MENGUBAH CRS menjadi WGS84, karena beberapa berkas SHP yang kita terima dari orang terkadang CRS nya bukan WGS84. Pada kasus saya adalah WGS 84 / UTM Zone 47N, yang satuannya meter, bukan derajat (Latitude, Longitude)

Untuk memudahkan Anda melihat hasil GeoJSON kantor kelurahan tersebut, Anda dapat lihat dari GIST saya di:

var kantor_lurah_84 = <
"type" : "FeatureCollection" ,
"crs" : < "type" : "name" , "properties" : < "name" : "urn:ogc:def:crs:OGC:1.3:CRS84" >> ,
"features" : [
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Simpang Tiga" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4557033136338 , 0.469427328437212 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Labuai" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.47158909432399 , 0.491438072161129 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Selata" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45570861841688 , 0.499368156595947 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Utara" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.46942149975804 , 0.510550800783581 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tanjung RHU" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.46259559250427 , 0.543761456758468 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Pesisir" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45346733536944 , 0.53739900256368 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sekip" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45949191209726 , 0.532268291953614 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Rintis" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45345937039221 , 0.533007960338908 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42608436844606 , 0.496558242029687 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43798012722948 , 0.497576847769372 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Wojorejo" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44171229058939 , 0.503863450119302 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tuah Karya" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.36986266315894 , 0.458184013280211 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sidomulyo Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40156253535429 , 0.459369309486729 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Delima" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40647150095236 , 0.478971833993359 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tampan" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42095384780264 , 0.540673644716707 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Air Hitam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40600987258719 , 0.533227537602959 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Labuh Baru Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4175191770594 , 0.514930563350704 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Labuh Baru Timur" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42546454122576 , 0.517320783423875 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Rejo Sari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.47901219770989 , 0.52197176875476 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sail" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.49863080462853 , 0.506819702719437 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Timur" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4955491889697 , 0.497343071759519 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kulim" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.51572582959759 , 0.474999097351359 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Melayu" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43442242275334 , 0.514064913095062 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Tengah" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43957164121653 , 0.513391649527206 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Jadi Rejo" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44545116525104 , 0.510403957057728 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Pulau Karam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44060727629454 , 0.526831112988868 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sukajadi" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43842513074193 , 0.526452500644619 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Harjosari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43592397725583 , 0.522319672163395 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kedung Sari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43408029579719 , 0.525295996593109 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Baru" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43547377068329 , 0.537726806461214 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Bandar" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43716049113215 , 0.539119036502492 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung dalam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44680097832122 , 0.538286434224159 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sago" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44445841751438 , 0.533674261850334 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Padang Terubuk" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43394472421053 , 0.53381826759503 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Padang Bulan" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43830696879694 , 0.528744115396168 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Tengah" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44458759074722 , 0.491456666257855 ] >>
]
>

PERHATIAN bahwa saya menambahkan

di awal file, karena akan kita akses dengan JavaScript.

Nah, kalau ingin melihat hasilnya, sila bertandang ke sini:

Source code dapat dilihat di:

<!DOCTYPE html >
< html >
< head >
< title > Leaflet GeoJSON Example </ title >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< link rel =" stylesheet " href =" http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css " />
< style >
html , body , # map <
height : 100 %
margin : 0 px
padding : 0 px
>
/* in production, you should display attribution! DO NOT TRY THIS: */
. leaflet-control-attribution
</ style >
</ head >
< body >
< div id =" map " > </ div >
< script src =" https://gist.github.com/kampar/5861d79496ca0af41e84/raw/69db60f79eed0fe0a414de9e5070aee9e886b809/kantor_lurah.js " type =" text/javascript " > </ script >
< script src =" http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js " > </ script >
< script >
//perhatikan bahwa format di sini adalah LatLong, sedangkan di JSON adalah LongLat
var sukajadi = [ 0.526452500644619 , 101.43842513074193 ]
//senter map di pusatnya
// eh … kamsud saya pusatkan peta di sukajadi, zoom 14
var map = L . map ( 'map' ) . setView (
sukajadi
, 14
)
L . tileLayer (
'https://api.tiles.mapbox.com/v4////.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'
, <
maxZoom : 18
, minZoom : 14
, attribution : 'Map data &copy <a href="http://openstreetmap.org">OpenStreetMap</a&gt contributors, '
+ '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a&gt, '
+ 'Imagery © <a href="http://mapbox.com">Mapbox</a>&#39
, id : 'mapbox.light'
> ) . addTo ( map )
/*
Jika kita lihat hasil export dari QGIS untuk layer Kelurahan, terdapat properties.Kelurahan yang berisi nama kantor.
*/
function onEachFeature ( feature , layer ) <
var popupContent = ""
//jika feature memiliki properties
// dan jika memiliki properties.Kelurahan
if ( feature . properties && feature . properties . Kelurahan ) <
popupContent += feature . properties . Kelurahan
>
layer . bindPopup ( popupContent )
>
L . geoJson ( kantor_lurah_84 , <
onEachFeature : onEachFeature
//,
> ) . addTo ( map )
</ script >
</ html >

Nah, dari sourcecode / kodesumber di atas, Anda dapat melihat bahwa SANGAT GAMPANG sekali menambahkan sebuah GeoJSON di Leaflet, yaitu cukup dengan 1 baris perintah:

L.geoJson(kantor_lurah_84, <
onEachFeature: onEachFeature
>).addTo(map)

Eits, apa pula itu onEachFeature? Fungsi itu saya tambahkan agar markernya dapat di klik, dan jika dikilik kilik genit dikit dia, dengan menampilkan pop-up HTML nama kelurahannya. Sila lihat fungsi tersebut untuk mendalaminya.


DATA SERVICES — API

GeoJSON GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon. Geometric objects with additional properties are Feature objects. Sets of features are contained by FeatureCollection objects. http://geojson.org/

GeoService REST-based application which can return html and json and depending on the version of Service and can include geojson, kml, and amf. http://resources.arcgis.com/en/help/arcgis-rest-api/index.html

SOAP (Simple Object Access Protocol) XML exchanging structured information in the implementation of Web Services in computer networks. http://wiki.gis.com/wiki/index.php/SOAP

ArcGIS Javascript Javascript-based API that can support building engaging, beautiful web mapping applications. https://developers.arcgis.com/javascript/


Geometry & 3D

Distance and Measurement

It is especially useful to have small, focused libraries that perform distance measurement, and conversion operations, such as finding the area of a geo-fence or converting miles to kilometers. The following libraries work with GeoJSON formatted objects representing geographic space.

  • Geolib provides distance (and estimated time) calculations between two latitude-latitude coordinates. A handy feature of Geolib is order by distance, which sorts a list or array by distance. The library also supports elevation.
  • Turf.js, which is described in the next section, also provides a distance function to calculate the great-circle distance between two points. Additionally, Turf.js calculates area, distance along a path, and the midpoint between points.
  • Sylvester is a library for geometry, vector, and matrix math in JavaScript. This library is helpful when basic measurement of lines and planes is not enough.

While the above libraries work well for 2D projections of geography, three-dimensional GIS is an exciting and expansive field—which is natural because we live 3D space. Fortunately, WebGL and the HTML5 canvas have also opened up new 3D techniques for web developers.

  • Three.js is a JavaScript library for geometric and mesh objects. The Three GeoJSON extension to Three.js provides a simple way to render GeoJSON objects on 3D planes and spheres.
  • The OSM Buildings project allows the map designer to represent buildings as 3D objects on a 2D map. The project uses OpenLayers and Leaflet. This can be used to great effect, for example Tom Holderness used OSM Buildings to map London.

Here’s an example of how to display GeoJSON Features on a 3D object:

You can also check out Byron Houwen’s article on WebGL and JavaScript, which shows how to create a terrain map of earth with Three.js


17.2 Leaflet.js

Leaflet.js is a popular and easy to use tool for building maps on the web. It represents a map by intelligently stitching together maptiles from a server such as Openstreetmap or Mapbox (or you could run your maptile server!). Leaflet then provides an API for using latitude and longitude to place additional data markers on top of the maptiles to represent your data. Note, you can use the API for arranging spatial (lat/long) data without placing it on top of maptiles – they just help provide context for your markers.

Leaflet allows you to group elements into different layers, which you can add and remove to your map at ease (they provide some nice controls to do this for you). Here is an example of building a simple Leaflet map:

In the above code section, the URL specified in the L.tileLayer function designates the server that should be accessed to retrieve the maptiles based on the lat/long and zoom of the map. Each time the user pans or zooms the map, Leaflet will request the appropriate (new) maptiles to draw your map. To add a marker to your map, you can easily create a new marker and add it to your map.

Note, you may want to create a layer that holds your markers and add your markers to your layer – this will facilitate easily adding and removing groups of markers.

For practice working with the Leaflet.js library, see exercise-1.


1 Answer 1

You guessed right, time format is wrong. In Leaflet TimeDimension plugin time is parsed with Java Script function Date.parse(dateTime) . This function accepts date/time strings in IETF RFC 2822 format or Ecma-262 5.1 format.

The right format for your time would then be 2006/03/11 09:00:00 or 2006-03-11T09:00:00 .

EDIT: From your comment below I understand you are loading GeoJSON layer as GeoJSON object. Parameter layer in L.timeDimension.layer.geoJson(layer) has to be Leaflet layer. You first have to load GeoJSON as Leaflet layer and then use it in L.timeDimension.layer.geoJson call.

I changed the data format to 2006-03-11T09:00:00 and still no go. I even tried adding a Z at the end with no result. It must be something else. Any other ideas?

This definitely was a problem. I tested it with your fiddle code and data, first with your date format (failed) and then with the two date formats I proposed (success).

I can't figure out what might be wrong since my fiddle code seems to work on your end. Could it be something in my HTML? I have used the same base code to display one interval data subset and just added the needed JS libraries for TimeDimension. Would you mind sharing the HTML part or even the whole thing if it's possible?

I'll publish my code this evening when I come home from my job. By the way, your fiddle is not complete, GeoJSON load part (march_32 layer) is missing. Problem might be hiding there.

I'm loading the data from an external JS file. It's the GeoJSON file with a var = march_32 at the beginning. Like I mentioned earlier, the map is showing when I take out the TimeDimension code, so the problem must be either with the dependencies or hiding somewhere else. I'll wait for your code this evening.


Displaying GeoJSON data in Leaflet? - Geographic Information Systems

Bath & North East Somerset Geographic Data

As part of our work at Bath: Hacked we try to publish all of our data in our Datastore. While that goes some way to working with & presenting geographic data, much facility is lost. This repository is designed to make it easier to share, create and work with data which has a geographic basis.

We have collected together subsets of many national datasets & joined them together with geographic data, where necessary.

Bath & North East Somerset Council have also kindly provided us with some of their own data about the area.

Feel free to submit pull requests.

Where needed, all files were subsetted (clipped) to the area of Bath & North East Somerset, using the file os_boundary.geojson or, where available in the data, using the ONS code for BANES (E06000022).

All files use the WGS 84 / EPSG:4326 spatial reference system. This is to provide maximum compatibility with common web-based mapping tools.

You must display the relevant attribution prominently alongside your use of the data. Typically by overlaying on a map or, where impractical, via a prominent link.

For bonus points we'd like it if you'd add a "Powered by Bath: Hacked" attribution.

While we have endeavoured to provide consistent & accurate information about licencing & attribution of the data, we advise that you perform your own checks & due diligence in using the data, especially if you use the data commercially. Your use of this data is at your own risk.

We believe to the best of our knowledge that all data can be published as open data. If you believe that we have made an error please contact us immediately to remedy the situation.

The files provided in this repository are intended for use with web-based mapping tools and geographical information systems.

For manipulating the files we strongly recommend use of QGIS software. It is tremendously powerful & available for many platforms.

Bath & North East Somerset Council

Item Description
Files See below
Source Provided by Bath & North East Somerset Council
Retrieved 2016-01 unless specified
Licence OGL
Attribution Contains OS data © Crown copyright and database right [year]
Data provided by Bath & North East Somerset Council
File Description
banes_burial_grounds.geojson Burial grounds (Retrieved 2017-10)
banes_circuit_of_bath_walk.geojson Circuit of Bath Walk route
banes_city_farms.geojson City farms (Retrieved 2017-10)
banes_community_agriculture.geojson Community agriculture (Retrieved 2017-10)
banes_community_gardens.geojson Community gardens (Retrieved 2017-10)
banes_community_orchards.geojson Community orchards (Retrieved 2017-10)
banes_community_supported_agriculture.geojson Community supported agriculture
banes_conservation_ar.geojson Conservation areas
banes_education_colleges.geojson Colleges (Retrieved 2017-10)
banes_education_secondary_schools.geojson Schools (Retrieved 2017-10)
banes_education_special_schools.geojson Special schools (Retrieved 2017-10)
banes_education_universities.geojson Universities (Retrieved 2017-10)
banes_defibrillators.geojson Defibrillators (Retrieved 2017-10)
banes_gp_surgeries.geojson GP surgeries
banes_green_belt.geojson Green belt land (Historic data from 2007)
banes_grit_bins.geojson Grit bins (Retrieved 2017-10)
banes_gss_allotments.geojson Allotments
banes_gss_amenity_grass.geojson Amenity grass areas
banes_gss_churchyards_cem.geojson Churchyards & cemeteries
banes_gss_education_greenspace.geojson Education green space
banes_gss_natural_greenspace.geojson Natural green space
banes_gss_outdoorsport_fixed.geojson Fixed outdoor sport areas
banes_gss_outdoorsport_pitches.geojson Outdoor sport pitches
banes_gss_outdoorsport_private.geojson Private outdoor sport areas
banes_gss_parks_recreation.geojson Park & recreational areas
banes_gss_playspace_children.geojson Play spaces for children
banes_gss_playspace_youth.geojson Play spaces for youth
banes_landscharareas.geojson Rural landscape character areas (Retrieved 2017-10)
banes_local_shops.geojson Local shops
banes_park_bbq_disposal.geojson BBQ disposal bins (Retrieved 2017-10)
banes_park_dog_bin.geojson Dog waste disposal bins (Retrieved 2017-10)
banes_park_litter_bin.geojson Litter bins (Retrieved 2017-10)
banes_park_picnic_tables.geojson Picnic tables (Retrieved 2017-10)
banes_park_recycling_bin.geojson Recycling bins (Retrieved 2017-10)
banes_park_seats_and_benches.geojson Seats & benches (Retrieved 2017-10)
banes_prow_bath.geojson Public rights of way in Bath (Retrieved 2017-10)
banes_prow_somerset.geojson Public rights of way in Somerset (Retrieved 2017-10)
banes_river_rescue_cabinets.geojson River rescue cabinets (Retrieved 2017-10)
banes_tpos.geojson Tree preservation orders & TPO areas (Retrieved 2017-10)
banes_wedding_venues.geojson Wedding venues (Retrieved 2017-10)

European Directive 2007/2/EC is known as 'INSPIRE'. INSPIRE establishes an infrastructure for spatial information in the European Union and it was transposed into UK law in December 2009. These datasets are released as part of the INSPIRE programme.


Bermain dengan Leaflet GeoJSON

Leaflet sangat menjanjikan dan dapat Anda gunakan (dan lebih saya sarankan) untuk menggantikan Google Maps API. Ada banyak alasan untuk tidak lagi menggunakan Google dan beralih menggunakan Leaflet, seperti:

  • Leaflet bisa Anda host untuk LAN/localhost. Google Maps API walaupun bisa juga untuk itu, tetapi “melanggar” term of use (katanya).
  • Leaflet open source.
  • sila lihat webnya Leaflet untuk masih banyak lagi alasan.

Sebenarnya, contoh dari Leaflet sendiri sudah ada untuk GeoJSON, dan dapat Anda pelajari di sini:

dan POC dapat dilihat di sini:

Namun, berhubung saya mengajar di Kota Pekanbaru, tentu lebih enak mengajar mahasiswa dengan contoh langsung Kota Pekanbaru, bukannya Denver.

Permasalahan saat mengajarkan GIS dengan sample lokal (Indonesia), adalah kurangnya data / sumber yang dapat digunakan. Untuk itu, saya meng-export sebuah SHP yang saya dapatkan dari saudara di Pekanbaru yang berisi posisi kantor lurah di Pekanbaru. Keakurasian data saya tidak tahu, tapi untuk bermain-main dengan Leaflet: boleh lah.

Untuk dapat mengubah berkas SHP menjadi GeoJSON, Anda cukup menggunakan QGIS. Dari QGIS, layer kantor_lurahan dapat Anda klik kanan lalu pilih simpan sebagai.

Jangan lupa untuk MENGUBAH CRS menjadi WGS84, karena beberapa berkas SHP yang kita terima dari orang terkadang CRS nya bukan WGS84. Pada kasus saya adalah WGS 84 / UTM Zone 47N, yang satuannya meter, bukan derajat (Latitude, Longitude)

Untuk memudahkan Anda melihat hasil GeoJSON kantor kelurahan tersebut, Anda dapat lihat dari GIST saya di:

var kantor_lurah_84 = <
"type" : "FeatureCollection" ,
"crs" : < "type" : "name" , "properties" : < "name" : "urn:ogc:def:crs:OGC:1.3:CRS84" >> ,
"features" : [
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Simpang Tiga" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4557033136338 , 0.469427328437212 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Labuai" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.47158909432399 , 0.491438072161129 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Selata" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45570861841688 , 0.499368156595947 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Utara" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.46942149975804 , 0.510550800783581 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tanjung RHU" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.46259559250427 , 0.543761456758468 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Pesisir" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45346733536944 , 0.53739900256368 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sekip" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45949191209726 , 0.532268291953614 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Rintis" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.45345937039221 , 0.533007960338908 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42608436844606 , 0.496558242029687 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43798012722948 , 0.497576847769372 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Wojorejo" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44171229058939 , 0.503863450119302 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tuah Karya" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.36986266315894 , 0.458184013280211 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sidomulyo Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40156253535429 , 0.459369309486729 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Delima" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40647150095236 , 0.478971833993359 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tampan" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42095384780264 , 0.540673644716707 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Air Hitam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.40600987258719 , 0.533227537602959 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Labuh Baru Barat" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4175191770594 , 0.514930563350704 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Labuh Baru Timur" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.42546454122576 , 0.517320783423875 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Rejo Sari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.47901219770989 , 0.52197176875476 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sail" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.49863080462853 , 0.506819702719437 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Timur" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.4955491889697 , 0.497343071759519 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kulim" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.51572582959759 , 0.474999097351359 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Melayu" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43442242275334 , 0.514064913095062 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Tengah" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43957164121653 , 0.513391649527206 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Jadi Rejo" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44545116525104 , 0.510403957057728 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Pulau Karam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44060727629454 , 0.526831112988868 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sukajadi" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43842513074193 , 0.526452500644619 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Harjosari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43592397725583 , 0.522319672163395 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kedung Sari" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43408029579719 , 0.525295996593109 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Baru" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43547377068329 , 0.537726806461214 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung Bandar" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43716049113215 , 0.539119036502492 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Kampung dalam" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44680097832122 , 0.538286434224159 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Sago" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44445841751438 , 0.533674261850334 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Padang Terubuk" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43394472421053 , 0.53381826759503 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Padang Bulan" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.43830696879694 , 0.528744115396168 ] >> ,
< "type" : "Feature" , "properties" : < "Kelurahan" : "Kantor Lurah Tangkerang Tengah" >, "geometry" : < "type" : "Point" , "coordinates" : [ 101.44458759074722 , 0.491456666257855 ] >>
]
>

PERHATIAN bahwa saya menambahkan

di awal file, karena akan kita akses dengan JavaScript.

Nah, kalau ingin melihat hasilnya, sila bertandang ke sini:

Source code dapat dilihat di:

<!DOCTYPE html >
< html >
< head >
< title > Leaflet GeoJSON Example </ title >
< meta charset =" utf-8 " />
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< link rel =" stylesheet " href =" http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css " />
< style >
html , body , # map <
height : 100 %
margin : 0 px
padding : 0 px
>
/* in production, you should display attribution! DO NOT TRY THIS: */
. leaflet-control-attribution
</ style >
</ head >
< body >
< div id =" map " > </ div >
< script src =" https://gist.github.com/kampar/5861d79496ca0af41e84/raw/69db60f79eed0fe0a414de9e5070aee9e886b809/kantor_lurah.js " type =" text/javascript " > </ script >
< script src =" http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js " > </ script >
< script >
//perhatikan bahwa format di sini adalah LatLong, sedangkan di JSON adalah LongLat
var sukajadi = [ 0.526452500644619 , 101.43842513074193 ]
//senter map di pusatnya
// eh … kamsud saya pusatkan peta di sukajadi, zoom 14
var map = L . map ( 'map' ) . setView (
sukajadi
, 14
)
L . tileLayer (
'https://api.tiles.mapbox.com/v4////.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw'
, <
maxZoom : 18
, minZoom : 14
, attribution : 'Map data &copy <a href="http://openstreetmap.org">OpenStreetMap</a&gt contributors, '
+ '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a&gt, '
+ 'Imagery © <a href="http://mapbox.com">Mapbox</a>&#39
, id : 'mapbox.light'
> ) . addTo ( map )
/*
Jika kita lihat hasil export dari QGIS untuk layer Kelurahan, terdapat properties.Kelurahan yang berisi nama kantor.
*/
function onEachFeature ( feature , layer ) <
var popupContent = ""
//jika feature memiliki properties
// dan jika memiliki properties.Kelurahan
if ( feature . properties && feature . properties . Kelurahan ) <
popupContent += feature . properties . Kelurahan
>
layer . bindPopup ( popupContent )
>
L . geoJson ( kantor_lurah_84 , <
onEachFeature : onEachFeature
//,
> ) . addTo ( map )
</ script >
</ html >

Nah, dari sourcecode / kodesumber di atas, Anda dapat melihat bahwa SANGAT GAMPANG sekali menambahkan sebuah GeoJSON di Leaflet, yaitu cukup dengan 1 baris perintah:

L.geoJson(kantor_lurah_84, <
onEachFeature: onEachFeature
>).addTo(map)

Eits, apa pula itu onEachFeature? Fungsi itu saya tambahkan agar markernya dapat di klik, dan jika dikilik kilik genit dikit dia, dengan menampilkan pop-up HTML nama kelurahannya. Sila lihat fungsi tersebut untuk mendalaminya.