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,842