1

I want to show all URL parameters or features onto a map. I have made the variable with ajax query as well as inside the loop data is printing with variable but I want to show this data with map into leaflet.

Can you suggest how to write code after calling web api?

Here I am pasting my code:

`

Update Example

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet-src.js"></script>
<script src="https://npmcdn.com/leaflet.path.drag/src/Path.Drag.js"></script>

html, body { }

.column {
    float: left;
}

.left {
    width: 30%;
    height: 600px;
    color: white;
    background-color: #2d8659;
}

.right {
    width: 70%;
    height: 600px;
}

.tb {
    margin: 10px;
}

    <div class="column right" id='map'>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script>
    /* var Latitude = new Array ();
     var LocationName = new Array ();
     var Location_TblRefID = new Array ();
     var Longitude = new Array ();
     var SensorData_Value = new Array ();
     var maxdate = new Array ();
     var rno = new Array ();
     var i = new Array ();*/


    function json() {
        var username = "1111";
        var password = "111111";
        document.write("Enter1");
        document.write("\n");
        document.write("<br>");

        var url = 'http://localhost:8101/api/wms/getgiswaterlevelmonitoring';
        $.ajax({
            url: url,

            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
            },
            type: 'GET',
            contentType: 'json',

            success: function (datasuccess) {
                console.log("datasuccess");

                if (datasuccess != null) {
                    for (var i = 0; i < datasuccess.length; i++) {

                        var Latitude = datasuccess[i].Latitude;
                        var LocationName = datasuccess[i].LocationName;
                        var Location_TblRefID = datasuccess[i].Location_TblRefID;
                        var Longitude = datasuccess[i].Longitude;
                        var SensorData_Value = datasuccess[i].SensorData_Value;
                        var maxdate = datasuccess[i].maxdate;
                        var rno = datasuccess[i].rno;

                    }
                    console.log("index" + i, Latitude, LocationName, Location_TblRefID, Longitude, SensorData_Value, maxdate, rno);

                    //return datasuccess[i].Location_TblRefID;




                }
            },




        });

    }


    var map = L.map('map').setView([22.306842, 73.181152], 4);

    var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var point = L.icon({
        iconUrl: "image/download1.png",
        iconSize: [32, 37],
        iconAnchor: [16, 37],
        popupAnchor: [0, -28],
        labelAnchor: [6, 0]
    });
    var featureStyle = {
        "color": "#ff7800",
        "weight": 5,
        "opacity": 0.2
    };

    L.geoJson(json()).addTo(map);



</script>

`

data with console:

datasuccess index85 22.300206 ParshuramBhattha 75 73.180398 5.38 2018-10-29T15:20:29 1

As i am printing test it is showing on console. e {options: {…}, _layers: {…}, _initHooksCalled: true, _leaflet_id: 59, _mapToAdd: e, …} options: {} _initHooksCalled: true _layers: {} _leaflet_id: 59 _map: e {options: {…}, _container: div#map.column.right.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-dr…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …} _mapToAdd: e {options: {…}, _container: div#map.column.right.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-dr…, _leaflet_id: 2, _containerId: 3, _fadeAnimated: true, …} _zoomAnimated: true proto: e

  • 1
    Please Edit the question to include the exact error as ASCII text. This is critical for both legibility on all devices and to make the error message searchable for others. – Vince Oct 11 '18 at 17:24
  • I dont know how to take error as a ASCII text and i am very new to this visual studio and coding so if you can check this code and suggest something like this that will be helpfull – Diksha Bandil Oct 18 '18 at 11:37
  • 1
    Vince just says that you should copy-paste the error message. – Stefan Oct 25 '18 at 18:01
  • I have done few changes and paste the code. – Diksha Bandil Oct 29 '18 at 9:59
0

It looks like your L.geoJson(json()).addTo(map); is not returning geoJson. Change this to a blank variable instead- e.g. var test=L.geoJson(); then within your ajax success function add: test.addData(datasuccess); map.addLayer(test);

  • Thanks Will Allen, I have update it is giving some empty data while printing but with map nothing is showing any more clarification for using web api into leaflet. – Diksha Bandil Oct 30 '18 at 10:01
  • Right - i don't have much to go on. Are you sure your API is returning GeoJson? If not - you could add an L.Marker from the Latitude and Longitude in your for loop. – Will Allen Oct 30 '18 at 10:20

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.