How to build

a GIS Day Mapping App - in 2 days

@AL_Laframboise 

...in 150 lines of JavaScript

Requirements

"easier"

"funner"

"nicer"

 

 

Geo + Text Search

Interactive

UX

tomorrow...

Data

CSV

Got Cloud?

Design

Yikes!

Low hanging fruit

  • Clusters
  • Colors
  • Symbology
  • Popups
  • Remove clicks
  • Auto recenter map
  • Multi-search

Code

 

esri-leaflet-geocoder

esri-leaflet-demographic-layer

esri-leaflet-heatmap-feature-layer

esri-leaflet-clustered-feature-layer

esri-leaflet-requirejs-example

esri-leaflet-browserify-example

esri-leaflet


    var map = L.map('map', { maxZoom: 16 }).setView([15, -35], 2);
        
    L.esri.basemapLayer('Streets').addTo(map);

    var clusterLayer = L.esri.clusteredFeatureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/gisdaydata/FeatureServer/0', 
    {

        // Format popup
        onEachFeature: function (geojson, marker) {
              
            marker.bindPopup("<h2>" + url + "</h2><p>" +  desc + "<br>" + geojson.properties.Type + " " +      geojson.properties.Audience + "</p></div><div class='popup-bottom'><p>DATE: " + dateTime + "</p><p>ADDRESS: " + geojson.properties.Address + "</p><div class='popup-host'><p>HOST: <a target='_top' href='mailto:" + geojson.properties.Email + "?subject=GIS Day Event'>" + geojson.properties.Organization + "</a></p></div   ></div>");

        },

        // Cluster styles
        iconCreateFunction: function (cluster) {
            var count = cluster.getChildCount(),
                    clusterSize;
                // Get cluster count
                if (count > 1 && count <= 5)
                    clusterSize = "small";
                else if (count > 5 && count <= 20)
                    clusterSize = "medium";
                else if (count > 20 && count <= 50)
                    clusterSize = "large";
                else
                    clusterSize = "xlarge";
                // Create cluster
                return new L.DivIcon({
                    html: "<div><span>"+count+"</span></div>",
                    className:"cluster cluster-"+clusterSize,
                    iconSize: null
                });
        }
    }
   
        /* Clusters */
        .cluster {
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }
        /* Small */
        .cluster-small {
            box-shadow: 0 0 4px rgba(255,255,255,0.15);
            background-color: rgba(140,177,210,0.4);
            margin-left: -20px;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
        .cluster-small:hover {
          background-color: rgba(140,177,210,0.7);
        }
        .cluster-small:hover > div {
          background-color: rgba(140,177,210,0);
        }
        .cluster-small > div {
            background-color: rgba(140,177,210,0.85);
            width: 24px;
            height: 24px;
            margin-left: 8px;
            margin-top: 8px;
            text-align: center;
            border-radius: 24px;
        }
        .cluster-small > div > span {
            line-height: 24px;
        }
...
    


        /* Popup */
        .leaflet-popup-pane h3 {
          font-family:'Avenir LT W01 65 Medium';
        }
        .leaflet-popup-content-wrapper {
            border-radius: 6px;
            overflow: hidden;
        }
        .leaflet-popup-content {
            width: 250px;
            font-size: 14px;
        }
        .leaflet-popup-content p {
            margin: 1em 0;
            max-height: 150px;
            overflow-y: scroll;
        }
        .leaflet-popup-content h2 {
            margin-top: 15px;
        }
        .popup-bottom {
            background: #f2f2f2;
            margin: 1em -20px -1em;
            padding: .5em 20px;
        }
        .popup-bottom p {
            margin: .5em 0;
        }
      










        // Add search control
        var searchControl = new L.esri.Geocoding.Controls.Geosearch({
          placeholder: "Search for event name, host or location",
          useMapBounds: false,
          providers: [
                new L.esri.Geocoding.Controls.Geosearch.Providers.FeatureLayer('http://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/gisdaydata/FeatureServer/0', {
              searchFields: ['Name', 'Organization'],
              label: 'GIS Day Events',
              bufferRadius: 5000,
              formatSuggestion: function(feature){
                return feature.properties.Name + ' - ' + feature.properties.Organization;
              }
            })
          ]
        }).addTo(map);

<150 JS
<200 CSS

The end

#geodev

@AL_Laframboise

 

 

How to Build a Web Map App in 2 Days

By alaframboise

How to Build a Web Map App in 2 Days

  • 3,759