Location Scoring - Statistics Criteria
Comparing multiple locations based on the statistic-data values of the reachable cells.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Include maplibregl javascript and css -->
<script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel="stylesheet">
<!-- Include turf for view fitting -->
<script src="https://npmcdn.com/@turf/turf/turf.min.js"></script>
<!-- Include targomo core -->
<script src="https://releases.targomo.com/core/latest.min.js"></script>
<!-- Include micro progress bar -->
<script src="https://www.targomo.com/developers/scripts/mipb.min.js"></script>
<style>
body, html {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
}
#map {
width: 100%;
height: 100%;
}
.widgetContainer {
position: absolute; padding: 8px;
top: 10px; left: 10px;
font-family: 'Open Sans', sans-serif;
}
.widget {
background: white; border-radius: 4px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
padding: 10px;
}
.maplibregl-marker {
cursor: pointer;
}
#statistics-select {
margin: 10px;
}
#markerScores1, #markerScores2 {
display: inline;
}
#markerLabel1 {
color: #FF8319;
}
#markerLabel2 {
color: #4BB5C5;
}
</style>
</head>
<body>
<!-- where the map will live -->
<div id="map"></div>
<div class="widgetContainer">
<div class="widget">
<span><b>Reachable population summary:</b></span>
<br><br>
<b id="markerLabel1">Marker 1: </b><div id="markerScores1"></div><br>
<b id="markerLabel2">Marker 2: </b><div id="markerScores2"></div>
</div><br>
<div class="widget" id="filter">
<div>Walk time (m)</div>
<input id="range" type="range" min="5" max="15" name="time" step="1" value="7"
onchange="rangevalue.value=value; updateRange(value)" />
<output id="rangevalue"></output>
</div><br>
</div>
<script>// create targomo client
const client = new tgm.TargomoClient('westcentraleurope', '__targomo_key_here__')
// Travel options
const EDGE_WEIGHT = 'time' // Can be 'time' or 'distance'
let MAX_TRAVEL = range.value*60 // Integer that represents meters or seconds, depending on EDGE_WEIGHT's value
rangevalue.innerHTML = MAX_TRAVEL/60
const TRAVEL_MODE = 'walk' // Can be 'walk', 'car', 'bike' or 'transit'
const attributionText = '<a href="https://www.targomo.com/developers/resources/attribution/" target="_blank">© Targomo</a>'
// Add the map and set the initial center
const map = new maplibregl.Map({
container: 'map',
style: client.basemaps.getGLStyleURL('Light'),
zoom: 13,
minZoom: 11,
center: [9.18, 45.4642],
attributionControl: false
})
.addControl(new maplibregl.NavigationControl())
.addControl(new maplibregl.AttributionControl({ customAttribution: attributionText }))
// disable scroll zoom
map.scrollZoom.disable()
const pBar = new mipb({ fg: '#FF8319' })
const statsGroupId = 90
// Initialize markers
let marker1 = new maplibregl.Marker({
draggable: true,
color: '#FF8319'
})
let marker2 = new maplibregl.Marker({
draggable: true,
color: '#4BB5C5'
})
marker1.setLngLat([9.18, 45.4642]).addTo(map)
marker1.on('dragend', updateScores)
marker2.setLngLat([9.20, 45.4642]).addTo(map)
marker2.on('dragend', updateScores)
map.on('load', async () => {
updateScores()
})
async function updateScores() {
pBar.show()
const locations = getMarkersLocations(marker1, marker2)
let data = await getScores(locations)
updateLegend(data)
pBar.hide()
}
function getMarkersLocations(marker1, marker2) {
let locations = []
locations[0] = { ...marker1.getLngLat(), id: 0 }
locations[1] = { ...marker2.getLngLat(), id: 1 }
return locations
}
// Location Scoring API request
async function getScores(locations) {
// Counting the reachable population for each location (male and female)
const results = await client.quality.fetch(locations, {
'statsMale': {
type: 'statisticsSum',
statisticGroupId: statsGroupId,
statisticsIds: [1],
referenceStatisticsIds: [],
maxEdgeWeight: MAX_TRAVEL,
edgeWeight: EDGE_WEIGHT,
travelMode: {
[TRAVEL_MODE]: {}
},
coreServiceUrl: 'https://api.targomo.com/westcentraleurope/'
},
'statsFemale': {
type: 'statisticsSum',
statisticGroupId: statsGroupId,
statisticsIds: [2],
referenceStatisticsIds: [],
maxEdgeWeight: MAX_TRAVEL,
edgeWeight: EDGE_WEIGHT,
travelMode: {
[TRAVEL_MODE]: {}
},
coreServiceUrl: 'https://api.targomo.com/westcentraleurope/'
}
})
return results.data
}
async function updateLegend(data) {
Object.values(data).forEach((marker) => {
let maleSum = Math.round(marker.scores.statsMale)
let femaleSum = Math.round(marker.scores.statsFemale)
let id = parseInt(marker.id) + 1
let poiElem = document.querySelector('#markerScores'+id)
poiElem.innerHTML = maleSum + ' males, ' + femaleSum + ' females'
})
}
// Called on slider's changes
function updateRange(value) {
MAX_TRAVEL = value * 60
updateScores()
}
</script>
</body>
</html>
Copied to clipboard
