Le portail francophone de la géomatique

window.onload = init;

function init(){
    const map = new ol.Map({
        view: new ol.View({
            center: [0, 0],
            maxZoom: 20,
            minZoom: 4
        }),
        target: 'js-map',
        keyboardEventTarget: document
    })


    console.log(ol.control.defaults());

    const popupContainerElement = document.getElementById('popup-coordinates');

    const popup = new ol.Overlay({
        element: popupContainerElement,
        positioning: 'bottom-right'
    })

    map.addOverlay(popup);

    map.on('click', function(e){
        const clickedCoordinate = e.coordinate;
        popup.setPosition(undefined);
        popup.setPosition(clickedCoordinate);
        popupContainerElement.innerHTML = clickedCoordinate;
    })

    // drag rotation interact
    const dragRotateInteraction = new ol.interaction.DragRotate({
        condition: ol.events.condition.altKeyOnly
    })

    map.addInteraction(dragRotateInteraction)

    // créer des polygones / formes
    //const drawInteraction = new ol.interaction.Draw({
        //type: 'Polygon',
        //freehand: true
    

    //map.addInteraction(drawInteraction);

    //drawInteraction.on('drawend', function(e){
        //let parser = new ol.format.GeoJSON();
        //let drawnFeatures = parser.writeFeatures([e.feature]);
        //console.log(drawnFeatures);
    //})

    const openStreetMapStandard = new ol.layer.Tile({
        source: new ol.source.OSM(),
        visible: true,        
        title: 'OSMStandard'
    })

    const openStreetMapHumanitarian = new ol.layer.Tile({
        source: new ol.source.OSM({
            url: 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
        }),
        visible: true,        
        title: 'OSMHumantarian'
    })

    // pour le moment la Stamen Terrain ne fonctionne pas
    const stamenTerrain = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
            attributions: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
        }),
        visible: true,
        title: 'StamenTerrain'
    })

    // Base Vector layers
    // Vector Tile Layer OSM
    const openstreetMapVectorTile = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            url: 'https://api.maptiler.com/tiles/v3/{z}/{x}/{y}.pbf?key=1jDM5XobgnqOfAvtmnVL',
            format: new ol.format.MVT(),
            attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
        }),
        visible: true,
    })

    const openstreetMapVectorTileStyles = 'https://api.maptiler.com/maps/7c274c44-1f84-47c6-91ec-f8b6360fdceb/style.json?key=1jDM5XobgnqOfAvtmnVL';
    olms.apply(map, openstreetMapVectorTileStyles);


    // layer group
    const baseLayerGroup = new ol.layer.Group({
        layers: [
            openStreetMapStandard, openStreetMapHumanitarian, stamenTerrain, openstreetMapVectorTileStyles
        ]
    })
    map.addLayer(baseLayerGroup);

    // layer switcher logic for basemaps
    const baseLayersElements = document.querySelectorAll('.sidebar > input[type=radio]');
    for(let baseLayersElement of baseLayersElements){
        baseLayersElement.addEventListener('change', function(){
            let baseLayerElementValue = this.value;
            baseLayerGroup.getLayers().forEach(function(element, index, array){
                let baseLayerTitle = element.get('title');
                element.setVisible(baseLayerTitle === baseLayerElementValue);
            })
        })
    }

    // Vector Layers

    const ThingsCergyGeoJSON = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: "data/vector_data/contoursGeojson.geojson",
            format: new ol.format.GeoJSON()
        }),
        visible: true
    })
    map.addLayer(ThingsCergyGeoJSON);

     // Vector Layers Image

     const ThingsCergyGeoJSONVectorImage = new ol.layer.VectorImage({
        source: new ol.source.Vector({
            url: "data/vector_data/contoursGeojson.geojson",
            format: new ol.format.GeoJSON()
        }),
        visible: true
    })
    //map.addLayer(ThingsCergyGeoJSON);

    // Poentiel activité KML
    const potentielKML = ol.layer.Vector({
        source: new ol.source.Vector({
            url: './data\vector_data\potentielattractiviteKML.kml',
            format: new ol.format.KML()
        }),
        visible: true
    })
    map.addLayer(potentielKML);  

    //HeatMap
    const heatMapOnlineFBUsers = new ol.layer.Heatmap({
        source: new ol.source.Vector({
            url: './data/vector_data/onlineFBUsers.geojson',
            format: new ol.format.GeoJSON()
        }),
        radius: 15,
        blur: 10
    })
    map.addLayer(heatMapOnlineFBUsers);
    
}