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 mapboxgl javascript and css -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-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;
        }      
        .mapboxgl-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='//localhost:1313/resources/attribution/' target='_blank'>&copy; Targomo</a>`;
        
        // Add the map and set the initial center
        const map = new mapboxgl.Map({
            container: 'map',
            style: client.basemaps.getGLStyleURL("Light"),
            zoom: 13,
            minZoom: 11,
            center: [9.18, 45.4642],
            attributionControl: false
        })
            .addControl(new mapboxgl.NavigationControl())
            .addControl(new mapboxgl.AttributionControl({ compact: true, customAttribution: attributionText }))
        
        // disable scroll zoom
        map.scrollZoom.disable()
        
        const pBar = new mipb({ fg: '#FF8319' });
        
        
        const statsGroupId = 90
        
        // Initialize markers
        let marker1 = new mapboxgl.Marker({
            draggable: true,
            color: '#FF8319'
        })
        let marker2 = new mapboxgl.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>  
            
        
content_copy
Copied to clipboard