3

I want to show the geoposition on a leaflet map lightning component. I enter an Id and get geolocation data accordingly. When I first enter an Id everything works fine, for the second time it shows this error:

This page has an error. You might just need to refresh it. Action failed:

c:ChildComponent$controller$jsLoaded [Cannot read property 'appendChild' of undefined]
Callback failed: apex://Call/ACTION$getServiceXMl
Failing descriptor: {c:ChildComponent$controller$jsLoaded}

Its says so about the line map.addLayer(angleMarker);

<aura:component access="global">
    <aura:attribute name="cID" type="String"/>
    <aura:attribute name="cGeoData" type="Object"/>
    <ltng:require styles="/resource/leaflet/leaflet.css" />
    <ltng:require scripts="/resource/leaflet/leaflet.js,/resource/marker/marker-direction.js,/resource/providers"/>

<aura:handler name="change" value="{!v.cGeoData}" action="{!c.jsLoaded}"/>
<div class="map" id="map"></div>

({
    jsLoaded: function(component, event, helper) {
    if(map==null){
        map=new L.map('map').setView([component.get("v.cGeoData").longitude, component.get("v.cGeoData").latitude], 13);
            L.tileLayer.provider('HERE.terrainDay', {
                app_id: 'removed for stack exchange',
                app_code: 'removed for stack exchange'
            }).addTo(map);
    }else if(map != null){
        map.invalidateSize();
        map.remove();
        L.map('map').setView([component.get("v.cGeoData").longitude, component.get("v.cGeoData").latitude], 13);
    }
    var list =
        [
            {"lon":component.get("v.cGeoData").latitude,"keyFlag":"0","id":1,"lat":component.get("v.cGeoData").longitude}
        ];
    var offSiteX = 0;
    var offSiteY = 0;

    for(var i in list){
        if(i % 3 != 0){
            continue
        }
        var img = new Image();
        img.src = '/resource/marker25';
        var lat = Number(list[i].lat) + offSiteY;
        var lon = Number(list[i].lon) - offSiteX;
        var latlng = {lat: lat, lon: lon};
        var labelFlag = false;
        var misc = {
            label: list[i].id,
            labelFlag: labelFlag,
            labelColor: 'black',
            img: img
        };
        // use angeMaker plugin
        var angleMarker = L.angleMarker(latlng, misc);
        var angle = component.get("v.cGeoData").direction;
        if(i > '0'){
            var previousLatLng = {lat: list[i-1].lat, lon:  list[i-1].lon};
            var nextLanLng = {lat: list[i].lat, lon:  list[i].lon};
            // get angele between A(previousPoint) and B(nextPoint)
            angle = angleMarker.getAngle(previousLatLng, nextLanLng);
        }
        // set angele A -> B
        angleMarker.setHeading(angle);
        map.addLayer(angleMarker);
    }}})

This error occurred after I put in the if statement in the js controller (if(map==null)), It showed the "map already initialized" error before.

What can I do to solve this? Maybe the structure of the code isn't sufficient?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.