g1.mapviewer

Mapviewer is an abstraction over Leaflet that can create common GIS applications using configurations.

Mapviewer requires npm install leaflet d3 d3-scale-chromatic g1.

<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<script src="node_modules/d3/build/d3.js"></script>
<script src="node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.min.js"></script>
<script src="node_modules/g1/dist/mapviewer.min.js"></script>

This creates a simple base map:

<div id="base-map" style="height:300px"></div>
<script>
  var map = g1.mapviewer({
    id: "base-map",
    layers: {
      worldMap: {
        type: "tile",
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      },
    },
  });
</script>

This loads a GeoJSON file, links data from state_score.json, and sets the fill color from a merged attribute.

<div id="geojson-map" style="height:300px">
  <script>
    var map = g1.mapviewer({
      id: "geojson-map",
      layers: {
        worldMap: {
          type: "tile",
          url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        },
        indiaGeojson: {
          type: "geojson",
          url: "india-states.geojson",
          link: {
            url: "state_score.json", // Load data from this file
            dataKey: "name", // Join this column from the URL (data)
            mapKey: "ST_NM", // with this property in the GeoJSON
          },
          options: {
            style: {
              fillColor: "#a00",
              fillOpacity: 1,
            },
          },
          tooltip: function (prop) {
            // On hover, show this HTML tooltip
            return prop.ST_NM + ": " + prop.TOT_P;
          },
          attrs: {
            fillColor: {
              // Fill the regions
              metric: "score", // with the "score" column from state_score.json
              scheme: "RdYlGn", // using a RdYlGn gradient
            },
          },
        },
      },
    });
  </script>
</div>

Note: You can use type: 'topojson' when loading TopoJSON maps.

g1.mapviewer options

g1.mapviewer methods

fitToLayer(layerName, options) Zooms map view to fit the layer. Supports same options as fitBounds options

zoomHandler(layerName, minZoomLevel, maxZoomLevel(optional) ) Shows the layer with layerName only between minZoomLevel and maxZoomLevel.

addNote(options) Adds a html label on the map. options is an object with following properties

removeLayer(layerName) Removes the layer from the map and returns the layer if the layer exists on the map, else throws an error. Note: This function will remove the layer from the map only. The layer object still exists in memory. Use addLayer(layerName) to add the layer back to the map.

addLayer(layerName, layerConfig)

g1.mapviewer events

g1.mapviewer features examples

This creates a set of markers for each row in cities.json.

<div id="marker-map" style="height:300px">
  <script>
    var map = g1.mapviewer({
      id: "marker-map",
      layers: {
        worldMap: {
          type: "tile",
          url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        },
        cityMarkers: {
          type: "marker",
          url: "cities.json",
          latitude: "lat",
          longitude: "long",
        },
      },
    });
  </script>
</div>

This creates a set of circle markers for each row in cities.json. You can apply styles based on any attribute or function.

<div id="circle-marker-map" style="height:300px">
  <script>
    var map = g1.mapviewer({
      id: "circle-marker-map",
      layers: {
        worldMap: {
          type: "tile",
          url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        },
        cityMarkers: {
          type: "circleMarker",
          url: "cities.json",
          latitude: "lat",
          longitude: "long",
          attrs: {
            fillColor: {
              metric: "pollution",
              scheme: "RdYlGn",
            },
          },
        },
      },
    });
  </script>
</div>

This adds legend to the map

<div id="choropleth" class="map"></div>
<script>
  var choro_map = g1.mapviewer({
    id: "choropleth",
    legend: {
      position: "topright",
      format: "d",
      shape: d3.symbolCircle,
      size: 100,
      scale: d3
        .scaleLinear()
        .domain([10, 20, 30])
        .range(["red", "yellow", "green"]),
      orient: "horizontal",
      width: 300,
      height: 100,
    },
    layers: {
      worldMap2: {
        type: "tile",
        url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      },
      indiaGeojson: {
        type: "geojson",
        url: "india-states.geojson",
        link: {
          url: "state_score.json",
          dataKey: "name",
          mapKey: "ST_NM",
        },
        options: {
          style: {
            fillColor: "#ccc",
            fillOpacity: 1,
          },
        },
        attrs: {
          fillColor: {
            metric: "score",
            scale: "linear",
            domain: [10, 20, 30],
            range: ["red", "yellow", "green"],
          },
        },
      },
    },
  });
</script>

Drilldown feature example:

<div id="geojson-map" style="height:300px">
  <script>
    var map = g1.mapviewer({
      id: "geojson-map",
      layers: {
        worldMap: {
          type: "tile",
          url: "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        },
        indiaGeojson: {
          type: "geojson",
          url: "india-states.geojson",
          link: {
            url: "state_score.json", // Load data from this file
            dataKey: "name", // Join this column from the URL (data)
            mapKey: "ST_NM", // with this property in the GeoJSON
          },
          tooltip: function (prop) {
            // On hover, show this HTML tooltip
            return prop.ST_NM + ": " + prop.TOT_P;
          },
          attrs: {
            fillColor: {
              // Fill the regions
              metric: "score", // with the "score" column state_score.json
              range: "RdYlGn", // using a RdYlGn gradient
            },
          },
        },
      },
      drilldown: {
        rootLayer: "indiaGeojson",
        levels: [
          {
            layerName: function (properties) {
              return properties["STATE"] + "-layer";
            },
            layerOptions: {
              url: function (properties) {
                return properties["STATE"] + "-census.json";
              },
              type: "geojson",
              attrs: {
                fillColor: {
                  metric: "DT_CEN_CD",
                  range: "RdYlGn",
                },
              },
              tooltip: function (properties) {
                return "DISTRICT: " + properties["DISTRICT"];
              },
            },
          },
        ],
      },
    });
  </script>
</div>

Examples showing usage of mismatch label:

<div class="error-pange"></div>
<div id="mismatch_map" class="map"></div>
<script>
  var custom_mismatch_map = g1.mapviewer({
    id: "custom-mismatch-map",
    layers: {
      indiaGeojson: {
        type: "geojson",
        url: "india-states.geojson",
        link: {
          url: state_scores,
          dataKey: "name",
          mapKey: "ST_NM",
          mismatch: function (mismatch_array) {
            // Render custom message
            var custom_message = `<h2>List of Data Merge Mismatches</h2>`;
            custom_message += `<table>`;
            mismatch_array.forEach(function (obj) {
              custom_message += `<tr><td>${obj.feature.properties.ST_NM}</td></tr>`;
            });
            custom_message += `</table>`;
            $(".error-pane").html(custom_message);
          },
        },
      },
    },
  });
</script>