// Adapted from https://developers.google.com/maps/documentation/javascript/adding-a-google-map
function initMap() {
const seattle = {lat: 47.6062, lng: -122.3321};
const map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: seattle});
const marker = new google.maps.Marker({position: seattle, map: map});
}
How do web maps work in the first place?
How do we visualize data on top of them?
Making public contributions to Open Street Map
MapBox base layers optimized for high contrast data visualization and outdoors navigation, respectively
// Adapted from https://developers.google.com/maps/documentation/javascript/adding-a-google-map
function initMap() {
const seattle = {lat: 47.6062, lng: -122.3321};
const map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: seattle});
const marker = new google.maps.Marker({position: seattle, map: map});
}
The state border of Michigan is a multipolygon
We can use a multiline to model Chicago's streets
var statesData = {
"type":"FeatureCollection",
"features": [
{
"type":"Feature",
"id":"01",
"properties": {
"name": "Alabama",
"density":94.65
},
"geometry": {
"type": "Polygon", "coordinates": [ ... <lots of longitude, latitude pairs>
var mapboxAccessToken = {your access token here};
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer(tileUrl, {
id: 'mapbox.light',
attribution: ...
}).addTo(map);
L.geoJson(statesData).addTo(map);
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
/// etc
}
function style(feature) {
return {
fillColor: getColor(feature.properties.density),
weight: 2,
opacity: 1,
/// etc
};
}
L.geoJson(statesData, {style: style}).addTo(map);
How do I idiomatically integrate maps into my React app?
<script>
// Adapted from https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/
mapboxgl.accessToken = 'pk.eyJ1IjoidGFzZXIiLCJhIj'
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function () {
map.addLayer({
"id": "points",
"type": "symbol",
"source": {
"type": "geojson",
"data": someGeoJSON
}
},
});
});
</script>
import { GoogleMap, Marker } from "react-google-maps"
...
render() {
return (
<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}
>
{props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
</GoogleMap>
)
}
componentDidMount() {
const {mapStyle} = this.props;
this._mapbox = new Mapbox(Object.assign({}, this.props, {
mapboxgl, // Handle to mapbox-gl library
container: this._mapboxMap, // a ref to the div we're putting the map in
onError: this._mapboxMapError,
mapStyle: normalizeStyle(mapStyle)
}));
this._map = this._mapbox.getMap();
}
import {Component} from 'react';
import ReactMapGL from 'react-map-gl'; // Uber wrapper
class Map extends Component {
state = {
viewport: {
width: 400,
height: 400,
latitude: 37.7577,
longitude: -122.4376,
zoom: 8
}
};
render() {
return (
<ReactMapGL
{...this.state.viewport}
onViewportChange={(viewport) => this.setState({viewport})}
/>
);
}
}
import ReactMapboxGl, { GeoJSONLayer } from "react-mapbox-gl";
const Map = ReactMapboxGl({
accessToken: "*****"
});
<Map>
<GeoJSONLayer
data={geojson}
symbolLayout={{
"text-field": "{place}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}}/>
</Map>
You can do anything that Mapbox GL does, which is quite a bit. But no more.
Engler.Will@gmail.com | wengler@axon.com | LinkedIn
Slides and links that got cut
"Highly Exaggerated" spheroid
Illinois-specific SRIDs
GeoJSON
KML
ESRI Shapefile