Application Development


There are many options when it comes to creating web applications using the MD iMAP GIS Catalog GeoJSON API. GeoJSON is a widely accepted data format, most modern JavaScript mapping libraries support the addition of GeoJSON objects. Some of the more popular JavaScript mapping libraries that have GeoJSO​N integration are: Leaflet, OpenLayers and Google Maps JS API. Leaflet and OpenLayers are both Open Source libraries.

The source code below describes how to take a data set from the MD iMAP GIS Data Catalog and utilize the Leaflet JavaScript Mapping Library to visualize the dataset via the provided GeoJSON API. More specifically, how to:

  • Create a blank Leaflet map​
  • Set the base layer
  • Import GeoJSON data from a URL
  • Display the GeoJSON on the map
  • Style the GeoJSON objects​
  • Create popups for every GeoJSON feature.

The instructions and source code are also available from the DatabayMD GitHub account.

To Get Started

  1. Create a folder named "leaflet-tutorial" in C:/inetpub/wwwroot.
    • Directory path for the folder is now C:/inetpub/wwwroot/leaflet-tutorial.
  2. Within the folder create index.html and the folders "style" and "js"
  3. In the "style" folder create style.css and in the "js" folder create map.js
  4. Place the following code in index.html
    1. <html>
    2. <head>
    3. <!--Leaflet CSS File-->
    4. <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    5. <!--User's CSS File-->
    6. <link rel="stylesheet" href="style/style.css" />
    7. <!--Leaflet JS File-->
    8. <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    9. <!--jQuery JS Files-->
    10. <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    11. <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    12. </head>
    13. <body>
    14. <!--This is the container in which Leaflet will inject the map code into-->
    15. <div id="map"></div>
    16. </body>
    17. <!--User's JS File-->
    18. <script src="js/map.js"></script>
    19. </html>
  5. Place the following code in style.css
    1. body{
    2. margin:0px;
    3. }
    4. #map{
    5. height: 100%;
    6. }
  6. Place the following code in map.js
    1. //This line finds the div with the id "map" and designates it as a Leaflet map container. It then sets view to the coordinates of Maryland and sets the zoom level zoomed out enough to see the entire state.
    2. var map = L.map('map').setView([38.8, -77.9], 8);
    3. //Here we tell Leaflet what tile server to use as the base layer. In this case, we're using OpenStreetMap. We then add the base layer to the map with .addTo(map).
    4. L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    5. attribution: 'Map data © <a href="http://openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com/">Mapbox</a>',
    6. }).addTo(map);
    7. /* iMap data can be found at http://data.imap.maryland.gov/. In this case we're going to display the "Rivers and Streams - General" dataset (which is located in Hydrology).
    8. * First we need to get our data. To get the link to the GeoJSON dataset, go to the URL of the dataset. For Federal Watersheds, that URL is
    9. * http://data.imap.maryland.gov/datasets/2bd0f7761bc64e1b86cdefd77ce69ad4_0. On the right there's a button to "Download Dataset".
    10. * Click it. Choose "API" and then copy the GeoJSON URL. It should be http://data.imap.maryland.gov/datasets/2bd0f7761bc64e1b86cdefd77ce69ad4_0.geojson.
    11. * Now we need to get our data via jQuery. We use the jQuery function getJSON(url, callback function) to tell jQuery where to get our JSON from and then what to
    12. * do with the data once we get it.
    13. */
    14. $.getJSON("http://data.imap.maryland.gov/datasets/2bd0f7761bc64e1b86cdefd77ce69ad4_0.geojson", function(data) {
    15. //data (the parameter of the callback function) is the GeoJSON data returned by the jQuery getJSON function call. You can see what is in data by uncommenting the line below and checking your JS console.
    16. console.log(data);
    17. /* We call Leaflet's geoJson function and pass it our GeoJSON data. This creates a GeoJSON Leaflet object, which we then add to the map. We're also going to bind a popup of the river or stream name and
    18. * set all of the river and stream lines to dark blue with an opacity of 1. To learn more look at the GeoJSON part of the Leaflet API at http://leafletjs.com/reference.html#geojson
    19. */
    20. L.geoJson(data, {
    21. style: {
    22. "color": "#000080",
    23. "opacity": 1
    24. }, onEachFeature: function(feature, layer) {
    25. //This takes HTML as an argument, so we'll give the popup the stream or river name as the header and below it we'll give the Hydrologic Unit Code (HUC).
    26. layer.bindPopup('<h1>' + feature.properties.PNAME + '</h1><h3>HUC:' + feature.properties.HUC + '</h3>');
    27. }
    28. }).addTo(map);
    29. });
  7. To see the website, go to your browser and type in "localhost/leaflet-tutorial/index.html".

The result should look like the graphic below. A live version of the tutorial is also available for review.

GeoJSON Example 

Please contact the GIO Office at service.desk@​maryland.gov for more information.​​