reservoirs.forEach(d => {
let marker = L.circleMarker(d.coords, {
className: `marker ${determineColor(d.latest_measurement.percent_full)}`,
fillOpacity: 0.8,
opacity: 0.8,
radius: params.radiusMultiplier * determineRadius(d.latest_measurement.conservation_capacity),
weight: 1,
}).bindPopup(`${d.name}`).addTo(markers);
marker.on('mouseover', e => e.target.setStyle({weight: 2}));
marker.on('mouseout', e => e.target.setStyle({weight: 1}));
marker.on('click', () => {
let listItem = $(`#${d.slug}`);
let rawNode = listItem.get(0);
if (params.status === 'small') {
let qMap = $('#map').get(0);
let mapBottom = qMap.offsetHeight + qMap.offsetTop;
window.scrollTo(0, rawNode.offsetTop - mapBottom);
} else {
rawNode.scrollIntoView();
}
items.removeClass('reservoir-item-active');
listItem.addClass('reservoir-item-active');
});
marker.addTo(markers);
});
(function(config) {
const options = {
retry_interval: 5000
};
const socket = new MapboxObservableSocket('ws://' + config.hostname + '/socket/', 'item', options);
let map = L.map('map')
.setView([0, 0], 2);
const element = React.createElement(Map, {
socket: socket,
map: map
});
ReactDOM.render(element, document.getElementById('map-component'));
socket.on('opened', function () {
socket.attachMap(map);
});
socket.on('error', function (error) {
console.log('error in socket', error);
});
socket.on('closed', function () {
console.log('socket has been closed');
});
socket.connect();
})(config);
$.ready(() => {
// instantiate map
const map = L.mapbox.map('map', 'texastribune.bd36475e', {
minZoom: params.baseZoom - 1,
zoomControl: false
}).setView(params.baseCenter, params.baseZoom);
// container for map markers
const markers = L.layerGroup().addTo(map);
// move control to top right
new L.Control.Zoom({
position: 'topright'
}).addTo(map);
$.get(dataUrl, data => {
let reservoirs = JSON.parse(data);
const items = builder(reservoirs, map, params.status);
reservoirs.forEach(d => {
let marker = L.circleMarker(d.coords, {
className: `marker ${determineColor(d.latest_measurement.percent_full)}`,
fillOpacity: 0.8,
opacity: 0.8,
radius: params.radiusMultiplier * determineRadius(d.latest_measurement.conservation_capacity),
weight: 1,
}).bindPopup(`${d.name}`).addTo(markers);
marker.on('mouseover', e => e.target.setStyle({weight: 2}));
marker.on('mouseout', e => e.target.setStyle({weight: 1}));
marker.on('click', () => {
let listItem = $(`#${d.slug}`);
let rawNode = listItem.get(0);
if (params.status === 'small') {
let qMap = $('#map').get(0);
let mapBottom = qMap.offsetHeight + qMap.offsetTop;
window.scrollTo(0, rawNode.offsetTop - mapBottom);
} else {
rawNode.scrollIntoView();
}
items.removeClass('reservoir-item-active');
listItem.addClass('reservoir-item-active');
});
marker.addTo(markers);
});
});
});