Get map center and zoom and pass to hidden form field

[Rowan Winsemius]

Hi all,

I'm a bit stuck writing a function and I'm hoping someone can help me.

Basically I'm trying to pass the map center point and zoom level to a hidden form field so that I can save it to a database and reuse the data later.

If anyone could provide some pointers I'd be greatly appreciative, I'm still a rookie so a code snippet would be ideal. I can handle the form side of things, its more the leaflet function that I need to generate the data that I can push into my field.

Thanks,
Rowan

---

This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

[Chris Hill]

On 17/09/14 11:27, Rowan Winsemius wrote:
> Hi all,
>
> I'm a bit stuck writing a function and I'm hoping someone can help me.
>
> Basically I'm trying to pass the map center point and zoom level to a
> hidden form field so that I can save it to a database and reuse the
> data later.
>
> If anyone could provide some pointers I'd be greatly appreciative, I'm
> still a rookie so a code snippet would be ideal. I can handle the form
> side of things, its more the leaflet function that I need to generate
> the data that I can push into my field.

The API documentation is your friend here:
http://leafletjs.com/reference.html#map-get-methods. map.getZoom()
returns the zoom level and map.getCenter() returns the centre of the map
as a LatLng object.

Another approach would be to use the plugin to store the map zoom &
position as part of the URI, leaflet-hash
https://github.com/mlevans/leaflet-hash.

--
Cheers, Chris
user: chillly

[Rowan Winsemius]

Hi Chris,

Yeah I've looked at the API and identified that those are the bits I need to use, its just that my skills aren't advanced enough to know how to write what I need :)

If you can be a bit more explicit about what the code might look like that would be fab!

Thanks,
Rowan (the rookie)

[Kathy Breen]

Hey Rowan,

Here's how I would do it:

First, you'll need some kind of identifier for the button in your HTML code.  It could look like this: <button class="zoomButton" type="button">Click me!</button>
Now you need to attach an event in your Javascript code (in this case it's a click event).  I usually use jQuery for this.  Here's an example;

jQuery(".zoomButton").click(function(){
     //this is where you put the leaflet functions, like map.getZoom(), map.getCenter() etc...
});

You'll want to save your zoom/center to variables, and push it wherever you need it.  It's probably super bad forum form for me to provide you with the working code, but I remember how frustrated I was when I was trying to get help learning code.  I highly recommend learning the vocabulary for what you want to do so that you can find the tools yourself, and any beginner's Javascript or jQuery reference can help you do that.  I started by using the FREE courses on codeacademy.com.  I also thinks it's really helpful to test your functions/events using alerts first to make sure they're actually triggering, which makes debugging easier early-on.  You'll want to check the type of the return value, too, to make sure you're getting what you want out of your efforts (alert(typeof [insert your variable name here]); would be a good start).

Anyway, I hope that was helpful and not pedantic.  Good luck!

[Rowan Winsemius]

Thanks Kathy, for the tips and general advice. 

It's certainly a fun ride trying to get into this programming stuff, lots of googling and lots of trial and error. Anyway I'm slowly getting there, the great thing about it is that there are communities out there that you can reach out to full of helpful people! Slowly the bits come together and start to make more sense.

Cheers

Rowan

[k_man_au]

Hi Rowan,

I've already done this exact task (although rather more comprehensively) so will save you a bit of time and give some more specific advice...

Kathy is right that you will ultimately get a better result from research and trial/error, but I know how hard it can be to get a start sometimes, so I'll give you the save code, and leave you to write the back end processing and reloading of saved data.

I suggest using an ajax call to maintain UX. No need for hidden fields, just use variables or access properties directly :) 

Hope it helps get you started

<input name="LocDesc" id="LocDesc" type="text" />

<input name="Save" type="button" value="Save Location" onClick="savePos();" />

function savePos()

{

$.post("./ajax/saveLoc.php",

{

lat: map.getCenter().lat,

lng: map.getCenter().lng,

zoom: map.getZoom(),

desc: $("#LocDesc").value

},

function(data,status){

alert("Submitted location: " + data + "\n" + status);

});

}

[Rowan Winsemius]

Thanks kman! I'll give it a shot and post back my results. As you say sometimes it helps to get off the blank screen.

[Rowan Winsemius]

Hi all,

Thought I'd post back my results. Because I wanted to incorporate my map into a larger form I wasn't too concerned about sending the results back via ajax as kman suggested, my users will simply zoom to their area of interest and then continue filling in the form.

So I firstly created a form field with the id="initialextent" eg
<input name="initialextent" id="initialextent" type="text" />

Then within my leaflet script I added the following

        function getExtent(e) {
              var lat = map.getCenter().lat;
              var lng = map.getCenter().lng;
              var zoom =  map.getZoom();

               $('#initialextent').val("["+lat+","+lng+"], "+zoom)     
        }
        map.on('mouseout', getExtent);


at the end I set the function to run on 'mouseout' rather than 'onclick' as I think it makes more sense in this instance.

Note that I also formatted the data going back into the field so that I can pump the results straight in as my map.setView

Anyway I hope that helps someone else, thanks to all those who helped me!
Cheers
Rowan