componentDidMount: function componentDidMount() {
var mapStyle;
if (this.props.mapStyle instanceof Immutable.Map) {
mapStyle = this.props.mapStyle.toJS();
} else {
mapStyle = this.props.mapStyle;
}
var map = new mapboxgl.Map({
container: this.refs.mapboxMap,
center: [this.state.longitude, this.state.latitude],
zoom: this.state.zoom,
style: mapStyle,
interactive: false,
preserveDrawingBuffer: this.props.preserveDrawingBuffer
// ,
// attributionControl: this.props.attributionControl
});
d3.select(map.getCanvas()).style('outline', 'none');
this._map = map;
this._updateMapViewport();
},
_each(markerData[id], function(mark) {
let marker = document.createElement('div');
marker.className = 'marker';
if (mark.coordinates.length) {
let x = map.project(mark.coordinates)['x'];
let y = map.project(mark.coordinates)['y'];
marker.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
}
let img = document.createElement('img');
img.src = 'logo_icon_small.png';
img.className = 'logo-marker';
marker.appendChild(img);
let text = "<p class='dark text'>"+ mark.caption+"</p>";
marker.addEventListener('click', function(e) {
var tooltip = new mapboxgl.Popup()
.setLngLat(map.unproject([e.x, e.y]))
.setHTML(text)
.addTo(map);
})
// marker.appendChild(text);
markerGroup.appendChild(marker);
})
features.forEach((marketRentArea) => {
let layerName = `market-rent-area-${marketRentArea.id}`;
this.map.addSource(layerName, {
"type": "geojson",
"data": marketRentArea
});
let layer = this.map.addLayer({
"id": layerName,
"type": "line",
"source": layerName,
"paint": {
"line-color": "transparent",
"line-width": 2,
"line-opacity": 0.8,
"line-dasharray": [4, 1]
}
});
layersList.push(layerName);
});
componentDidUpdate (prevProps, _prevState) {
if (!this.props.events.fetching && !this.markers && this.props.events.items.length > 0) {
this.initMap()
}
this.checkSelectAndHover('select', this.props.app.origin, prevProps.app.selected, this.props.app.selected)
this.checkSelectAndHover('hover', this.props.app.origin, prevProps.app.hover, this.props.app.hover)
if (!this.resized) {
// trigger resize as long as we haven't completed map init yet
this.map.resize()
}
}
function init() {
var layers = {
'Buried Services': 'services_',
Water: 'site_water_',
DKs: 'dk_',
'NOC-Physical': 'noc_',
Power: 'power_',
Lighting: 'lighting_',
Villages: 'villages_',
GSM: 'gsm_'
};
var layers_enabled = ['Villages'];
var layer_switcher = new LayerSwitcher(layers, layers_enabled);
layer_switcher.setInitialVisibility(map_style);
var map = new mapboxgl.Map({
container: 'map',
style: map_style,
hash: true,
});
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
map.addControl(
new mapboxgl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
},
trackUserLocation: true,
}),
);
map.addControl(
new mapboxgl.ScaleControl({
maxWidth: 200,
unit: 'metric',
}),
);
map.addControl(new DistanceMeasure(), 'top-right');
map.addControl(
new VillagesEditor('villages', 'villages_symbol'),
'top-right',
);
map.addControl(layer_switcher, 'top-right');
if ('serviceWorker' in navigator) {
runtime.register();
}
}
copyTo(container) {
return new Mapbox(
{
container: container,
style: this._map.getStyle(),
interactive: false,
renderWorldCopies: false,
preserveDrawingBuffer: true,
fadeDuration: 0
},
this._tracks,
this._details,
this._language
);
}
features.forEach((areaUnit) => {
let layerName = `area-unit-${areaUnit.properties.id}`;
this.map.addSource(layerName, {
"type": "geojson",
"data": areaUnit
});
let fill = areaUnit.properties.percent_crowded ? scale(areaUnit.properties.percent_crowded) : 'transparent';
this.map.addLayer({
"id": layerName,
"type": "fill",
"source": layerName,
"paint": {
'fill-color': fill,
//'fill-opacity': 0.5,
'fill-outline-color': 'rgba(0, 0, 0, 0.5)'
}
});
layersList.push(layerName);
});
initMap () {
this.map = new mapboxgl.Map({
container: this.refs.mapEl,
style: 'mapbox://styles/climatescope/cjnoj0lpf1b7d2sqqp31ef6c9',
minZoom: 2,
zoom: 2,
center: [-60.646, -26.153],
interactive: false
})
this.map.on('load', () => {
this.mapLoaded = true
this.fitGeographyBounds()
this.highlightGeography()
})
}
componentDidUpdate() {
const issPosition = this.props.issPosition;
const markerElement = document.createElement('div');
markerElement.className = 'marker';
if (issPosition) {
this.issMarker = new mapboxgl.Marker(markerElement)
.setLngLat(issPosition)
.addTo(this.map);
}
this.map.flyTo({
center: issPosition,
speed: 0.1,
curve: 1,
easing(t) {
return t;
}
})
}
this.map.on('mousemove', (e) => {
const features = this.map.queryRenderedFeatures(e.point, { layers: ['markers']})
if (!features.length) {
if (this.hovering) {
this.hover_popup.remove()
this.props.hoverExitEvent()
this.hovering = false
}
return
}
if (!this.hovering) {
if (features[0].properties.cluster) {
return
}
this.hovering = true
this.hover_popup.setLngLat(features[0].geometry.coordinates)
.setHTML('<div class="marker-popup">' +
'<div class="icon"><img src="' + features[0].properties.icon.replace('/media/', '/media_thumbs/').replace(/\+/g, '%2B') + '_s.jpg' + '"></div>' +
'<div class="connector"></div>' +
'<div class="dot"></div>' +
'</div>')
.addTo(this.map)
const featureIds = features.map((e) => e.properties.evid)
this.props.hoverEnterEvent(this.props.events.items.filter(
(ev) => featureIds.includes(ev.id)
))
// fugly hack to grab the click on the popup
this.hover_popup._content.onclick = (_e) => {
this.props.selectEvent(this.props.events.items.filter(
(ev) => featureIds.includes(ev.id)
))
this.props.hoverExitEvent()
}
}
})
constructor(options, tracks, details, language) {
mapboxgl.accessToken = token;
if (!mapboxgl.supported()) {
throw Error(i18n.translate("msg_mapbox_error"));
}
this._tracks = tracks || new Map();
this._details = details || {};
this._language =
language ||
new MapBoxLanguage({
defaultLanguage: i18n.currentLanguage()
});
try {
this._map = new mapboxgl.Map(options);
} catch (e) {
throw Error(i18n.translate("msg_mapbox_error"));
}
this._map.on("styledata", () => this._updateAllTracks());
this._addControls();
}
var _each = require('lodash.foreach');
var venueAreas = require('./data/areas');
var markerData = require('./data/captions');
mapboxgl.accessToken = 'pk.eyJ1IjoibW9sbHltZXJwIiwiYSI6ImNpbW1xbXptYTAwNTV2N2tyNXR6cmdpaWQifQ.KPB4laFfAUtauSEKssj3eQ';
var splash = {
id: 'splash',
geometry: { coordinates: [-60.774781, -16.394651] },
properties: { zoom: 3 }
}
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mollymerp/cimmhyden000cb3klt17e57ss',
center: [-60.774781, -16.394651],
zoom: 3
});
var forward_button = document.getElementById('forward');
var back_button = document.getElementById('back');
var stop_ids = venueAreas.features.map(function(feat) { feat.properties.id });
var state = {
current: {
id: 'splash',
index: 0
},
stops: ['splash'].concat(stop_ids),
features: [splash].concat(venueAreas.features),
forward: function() {
var i = (this.current.index >= this.stops.length - 1) ? this._setIndex(0) : this._setIndex(this.current.index + 1);
loadAreaUnits(data) {
let features = topojson.feature(data, data.objects.area_units).features;
let vals = features.map((feature) => feature.properties.percent_crowded);
let scale = scaleLinear().domain([...Array(9).keys()].map((n) => n * 6)).range(this.colourScale);
let layersList = [];
features.forEach((areaUnit) => {
let layerName = `area-unit-${areaUnit.properties.id}`;
this.map.addSource(layerName, {
"type": "geojson",
"data": areaUnit
});
let fill = areaUnit.properties.percent_crowded ? scale(areaUnit.properties.percent_crowded) : 'transparent';
this.map.addLayer({
"id": layerName,
"type": "fill",
"source": layerName,
"paint": {
'fill-color': fill,
//'fill-opacity': 0.5,
'fill-outline-color': 'rgba(0, 0, 0, 0.5)'
}
});
layersList.push(layerName);
});
// Create a popup, but don't add it to the map yet.
let popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
let map = this.map;
this.map.on('mousemove', this.throttle((event) => {
let features = this.map.queryRenderedFeatures(event.point, { layers: layersList });
//
// MRAs.forEach((id) => {
// this.map.setPaintProperty(`market-rent-area-${id}`, "line-color", "transparent");
// })
this.map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
if (!features.length) {
popup.remove();
return;
}
let feature = features[0];
let mraData = MRAData.filter((records) => records['SAU'] === Number(feature.properties.id));
if(this.state.details.name != feature.properties.name) {
console.log('setting state for', feature.properties.name);
this.setState({ details: feature.properties, marketRentDetails: mraData });
}
let num = feature.properties.percent_crowded;
if(!num) {
num = 0;
}
// console.log('Mapping', Mapping[feature.properties.id]);
// this.map.setPaintProperty(`market-rent-area-${Mapping[feature.properties.id]}`, "line-color", "#27ae60");
// Populate the popup and set its coordinates
// based on the feature found.
/*popup.setLngLat(centroid(feature).geometry.coordinates)
.setHTML(`${feature.properties.name} - ${d3.format('.2g')(num)}% crowded`)
.addTo(this.map);*/
}), 250, this);
// Aja().method('get')
// .url('market_rent.json')
// .on('success', (data) => this.loadMarketRentAreas(data))
// .go();
}
changeTrackStyle(option) {
// option = {property: "line-color", value: "#ff0000"};
this._map.setPaintProperty("route", option.property, option.value);
}
updateTrack(track) {
this._map.getSource(track.id).setData(track.geojson);
}
remove() {
this._map.remove();
}
componentDidMount() {
const {
style,
hash,
preserveDrawingBuffer,
accessToken,
center,
pitch,
zoom,
minZoom,
maxZoom,
maxBounds,
bearing,
onStyleLoad,
onClick,
onMouseMove,
onDragStart,
onDrag,
onMouseUp,
onMove,
onMoveStart,
onMoveEnd,
onZoom,
scrollZoom
} = this.props;
MapboxGl.accessToken = accessToken;
const map = new MapboxGl.Map({
preserveDrawingBuffer,
hash,
zoom: zoom[0],
minZoom,
maxZoom,
maxBounds,
bearing,
container: this.refs.mapboxContainer,
center,
pitch,
style,
scrollZoom
});
map.on("style.load", (...args) => {
if (onStyleLoad) {
onStyleLoad(map, ...args);
}
this.setState({ map });
});
map.on("click", (...args) => {
if (onClick) {
onClick(map, ...args);
}
});
map.on("mousemove", (...args) => {
if (onMouseMove) {
onMouseMove(map, ...args);
}
});
map.on("dragstart", (...args) => {
if (onDragStart) {
onDragStart(map, ...args);
}
});
map.on("drag", (...args) => {
if (onDrag) {
onDrag(map, ...args);
}
});
map.on("mouseup", (...args) => {
if (onMouseUp) {
onMouseUp(map, ...args);
}
});
map.on("movestart", (...args) => {
if (onMoveStart) {
onMoveStart(map, ...args);
}
});
map.on("move", (...args) => {
if (onMove) {
onMove(map, ...args);
}
});
map.on("moveend", (...args) => {
if (onMoveEnd) {
onMoveEnd(map, ...args);
}
});
map.on("zoom", (...args) => {
if (onZoom) {
onZoom(map, ...args);
}
});
}
updateBounds(options) {
this._map.fitBounds(
trackutils.bounds(this._tracks.get("cutouts").geojson),
options
);
}
initMap() {
this.markers = true
let placeMapping = {}
this.props.events.items.map((ev, index) => {
if (!placeMapping[ev.place.id])
placeMapping[ev.place.id] = []
placeMapping[ev.place.id].push(ev.id)
})
const markerData = {
'type': 'FeatureCollection',
'features': this.props.events.items.map((ev, index) => {
return {
'type': 'Feature',
'properties': {
'description': ev.title,
'evid': ev.id,
'icon': ev.icon,
'marker-symbol': 'default-marker'
},
'geometry': {
'type': 'Point',
'coordinates': ev.place.position.split(',').map(x => +x).reverse()
}
}
})
}
var sourceObj = new mapboxgl.GeoJSONSource({
'data': markerData,
'cluster': false,
'clusterMaxZoom': 5
})
this.map.addSource('eventMarkers', sourceObj)
this.map.addLayer({
'id': 'markers',
'type': 'symbol',
'source': 'eventMarkers',
'interactive': true,
'layout': {
'icon-image': '{marker-symbol}',
'icon-allow-overlap': true
}
})
this.map.addLayer({
'id': 'clusters',
'type': 'circle',
'source': 'eventMarkers',
'paint': {
'circle-color': '#2dc6e0',
'circle-opacity': 0.85,
'circle-radius': 10
},
'filter': ['>', 'point_count', 1]
});
this.map.addLayer({
'id': 'cluster-count',
'type': 'symbol',
'source': 'eventMarkers',
'layout': {
'text-field': '{point_count}',
'text-font': [
'DIN Offc Pro Medium',
'Arial Unicode MS Bold'
],
'text-size': 11
},
'paint': {
'text-color': '#ffffff'
}
});
this.hover_popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
anchor: 'top'
})
this.select_popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false,
anchor: 'top'
})
this.hovering = false
this.map.on('mousemove', (e) => {
const features = this.map.queryRenderedFeatures(e.point, { layers: ['markers']})
if (!features.length) {
if (this.hovering) {
this.hover_popup.remove()
this.props.hoverExitEvent()
this.hovering = false
}
return
}
if (!this.hovering) {
if (features[0].properties.cluster) {
return
}
this.hovering = true
this.hover_popup.setLngLat(features[0].geometry.coordinates)
.setHTML('<div class="marker-popup">' +
'<div class="icon"><img src="' + features[0].properties.icon.replace('/media/', '/media_thumbs/').replace(/\+/g, '%2B') + '_s.jpg' + '"></div>' +
'<div class="connector"></div>' +
'<div class="dot"></div>' +
'</div>')
.addTo(this.map)
const featureIds = features.map((e) => e.properties.evid)
this.props.hoverEnterEvent(this.props.events.items.filter(
(ev) => featureIds.includes(ev.id)
))
// fugly hack to grab the click on the popup
this.hover_popup._content.onclick = (_e) => {
this.props.selectEvent(this.props.events.items.filter(
(ev) => featureIds.includes(ev.id)
))
this.props.hoverExitEvent()
}
}
})
this.map.on('click', (e) => {
const features = this.map.queryRenderedFeatures(e.point, { layers: ['markers'] })
const cfeatures = this.map.queryRenderedFeatures(e.point, { layers: ['clusters'] })
if (!features.length)
return;
if (features[0].properties.cluster) {
// this.map.setCenter(features[0].geometry.coordinates)
// this.map.setZoom(6.5)
}
else {
// we never get here since the cli ck was caught on the hover_popup
}
})
this.switchLayers('default', true)
// final resize attempt
this.map.resize()
this.resized = true
}
marker.addEventListener('click', function(e) {
var tooltip = new mapboxgl.Popup()
.setLngLat(map.unproject([e.x, e.y]))
.setHTML(text)
.addTo(map);
})
resizeListener () {
this.map && this.map.resize()
}
<li onClick={(e) => {
this.map.setBearing(0)
}}><img src="/static/img/orient-map.png"></img></li>
<li onClick={(e) => {
this.map.flyTo({zoom: this.map.getZoom() - 1})
}}><img src="/static/img/zoom-out.png"></img></li>
componentWillUnmount () {
this.map.remove()
}