Search code examples
kmlgeojsonhere-api

Is "here maps javascript api" supporting GeoJSON or any file format alternative to KML


Is it possible to load GeoJson formatted data into here maps js api in a proper way? I am using AJAX to send data coming from mysql which is formatted in GeoJSON. I don't want to store any kml files.


Solution

  • There is no GeoJSON parser available directly in the legacy 2.x API, you will have to write your own. Since an external GeoJSON parser library exists for the Google Maps API, it is just a matter of replacing the Google Specific map objects with equivalent HERE Maps ones.

    I've created a port based on the original, but keeping the HERE Maps Syntax here

    The basic usage of the GeoJSONContainer is through the parseGeoJSON() method as follows:

    function extend(B, A) {
        function I() {}
        I.prototype = A.prototype;
        B.prototype = new I();
        B.prototype.constructor = B;
    }
    
    function createGeoJsonParser(){
        extend(GeoJSONContainer, nokia.maps.map.Container);
        parser = new GeoJSONContainer();
    
    }
    
    function parseJson(jsonObject){
    
        result = parser.parseGeoJSON(jsonObject);   
        if (parser.state == "finished") {
            map.objects.addAll(result);
            map.set("center", map.objects.get(0).getBoundingBox().getCenter());
    
            map.addListener("click" ,  function(evt) {
                var text = JSON.stringify(evt.target.properties);
                bubble = infoBubbles.addBubble(text!== undefined ? 
                           text : "properties undefined",
                     evt.target.getBoundingBox().getCenter());
            }, false);
        } else {
            console.log(result);
        }
    }
    

    see the link: Simple geoJSON parsing

    Since GeoJSONContainer is an extension of Container, you could also add the geoJSON data directly onto the map using addGeoJSON()

    var err = resultSet.addGeoJSON(jsonManager.object);
    if (resultSet.state == "finished") {
        map.zoomTo(container.getBoundingBox());
        container.addListener("click" ,  function(evt) {
            infoBubbles.addBubble(evt.target.properties.Description,
             evt.target.getBoundingBox().getCenter());
        }, false);
    } else {
        alert(err);
    }
    

    Basic Example Use: - Russia Provinces

    You can also add and style data points in the same manner as the clustering component

    Styled Examples:

    It comes with no guarantees of course.

    For the current 3.x API, a geojson reader is included as standard you can refer to fxxxit's answer below:

    var reader = new H.data.geojson.Reader('/path/to/geojson/file.json');
    reader.parse();
    //assuming that map already exists
    map.addLayer(reader.getLayer());