CODEWITHSUNDEEP
javascriptjquery
Przemek
Przemek

Reputation: 822

mapbox append values to form on map click

I am using mapbox and I am inserting a marker on map click, however I also want to append those values in a form so I could use my controller in order to store these values.

Marker is being added and values are appended however,

enter image description here

in the last value where is says LngLat(-1) etc, after a comma it appends " which should ve after closing bracket ) how can it be removed?

       <div id="right" class="map">
            <div id='map' class="map" style='width: 100%; height: 100%; margin: 0px;'></div>
            <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoibGl2ZS1vbGRoYW0iLCJhIjoiY2ozbXk5ZDJ4MDAwYjMybzFsdnZwNXlmbyJ9.VGDuuC92nvPbJo-qvhryQg';
            var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v10',
                        center: [-1.77, 52.73],
                        zoom: 3
            });
                        map.addControl(new MapboxGeocoder({
                        accessToken: mapboxgl.accessToken
                    }));
                        map.on('click', function (e) {
                        var lng = e.lngLat.lng;
                        var lat = e.lngLat.lat;
                        var lngLat = e.lngLat;
                        $( ".append").append( "<input type=hidden name=lng value="+lng+">");
                        $( ".append").append( "<input type=hidden name=lat value="+lat+">");
                        $( ".append").append( "<input type=hidden name=lngLat value="+lngLat+">");
                        new mapboxgl.Marker()
                        .setLngLat(e.lngLat)
                        .addTo(map);
});
            </script>
                            <form class="append" role="form" method="POST" action="{{ action('BusinessController@saveMarkers') }}">
                                <button type="submit" class="btn btn-success">
                  Save Marker
                </button>
                            </form>

Upvotes: 0

Views: 136

Answers (1)

Freeman Lambda
Freeman Lambda

Reputation: 3655

The problem lies in this line

$( ".append").append( "<input type=hidden name=lngLat value="+lngLat+">");

jQuery is trying to parse the string inside append into valid html. Valid html means that attributes need to be wrapped in " quotes. Thus jQuery tries to turn type=hidden into type="hidden" and so on. This works fine for simple cases, but it is not working well for the line where the problem occurs.

To solve this issue, I think it is best to make jQuery's work easier, by constructing better html, that is easier to parse:

'<input type="hidden" name="lngLat" value="LngLat {lng: ' + lngLat.lng + ', lat: ' + lngLat.lat + '}">'

Upvotes: 1

Related Questions