'map actions'

31 views
Skip to first unread message

Bradley Skopyk

unread,
Mar 31, 2022, 10:41:50 AM3/31/22
to Leaflet
Hello, 
I would like to recreate the idea of 'map actions' within a leaflet environment, meaning that I would like a user to be able to click on text outside of the map div container and for that click to trigger a change in the map (the map focal point, zoom level, and the layers to be included). Is this possible? If so, can anyone point me in the direction of possible resources that would guild my steps? 

Many thanks,
Brad

Mark Lawton

unread,
Mar 31, 2022, 12:36:43 PM3/31/22
to leafl...@googlegroups.com
brad,
check out my site and let me know if any of the features you see there are what you are looking for. then, i can tell you how i did it…




--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/9d620acc-348a-46cb-8588-101d9a726705n%40googlegroups.com.

Message has been deleted

recursos pt

unread,
Mar 31, 2022, 1:59:30 PM3/31/22
to Leaflet
In a much more modest way, this should work:

<body>
    <div id="buttons">
        <button id="locate" type="button" name="Locate Me" onclick="locateMe()">
            You are here
            <img  src="icons/marker-icon-red-mini.png">
        </button>
        <button id="help" type="button" name="Help me" onclick="helpMe()">Help</button>
        // etc. more buttons
    </div>

<div id="map"></div> // the usual thing

    // and the scripts somewhere in the code:
    <script>
        function locateMe() {
            // etc.
        }
        function helpMe() {
            window.open("help/help.html")
        }
    </script>

</body>

Bradley Skopyk

unread,
Apr 1, 2022, 12:21:46 PM4/1/22
to leafl...@googlegroups.com
This is pretty much perfect and was really easy to implement. Thank you!

Brad Skopyk
Associate Professor
Department of History 
Binghamton University


On Thu, Mar 31, 2022 at 1:44 PM recursos pt <recur...@gmail.com> wrote:
In a much more modest way, this works:
<div id="buttons">
           <button id="locate" type="button" name="Locate Me" onclick="locateMe()">You are here
<img
                    src="icons/marker-icon-red-mini.png"></button>
 <button id="help" type="button" name="Help me" onclick="helpMe()">Help</button>
</div>
<div id="map"></div> // the usual thing
...
 

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/c89c65a8-8e18-4334-8105-64173c33eb0cn%40googlegroups.com.

Bradley Skopyk

unread,
Apr 1, 2022, 12:25:11 PM4/1/22
to leafl...@googlegroups.com
Hello Mark,
Thank you so much for your help. I love this map of yours! The one that I will need will integrate paragraphs of text and maps and images, but I think that the basic strategy is much the same for yours and mine. If I am not mistaken, your dropdown menus are buttons (or like buttons) whereby a click invokes a function to run in js. Is that correct?

Brad Skopyk
Associate Professor
Department of History 
Binghamton University

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/5A0FD0E5-D16B-421A-9524-F3393CA8F94B%40gmail.com.

Mark Lawton

unread,
Apr 1, 2022, 12:28:16 PM4/1/22
to leafl...@googlegroups.com
Yes, the menus act like buttons and each country on the map also acts like a button.

Pictures of players also act like buttons.

the buttons call different js functions that update the map


Bradley Skopyk

unread,
Apr 1, 2022, 1:51:53 PM4/1/22
to leafl...@googlegroups.com
Neat. And a drop down list like you have could, I assume, be implemented anywhere in the webpage, right? So, if I create a few different map views for the user to choose from, I could have these branched or listed in a dropdown, but could present this list in the middle of a paragraph, for instance. Is the dropdown list an html element?

Brad Skopyk
Associate Professor
Department of History 
Binghamton University

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/5B6E55CA-915A-4C93-BA85-F71052624BB9%40gmail.com.

Mark Lawton

unread,
Apr 1, 2022, 2:23:57 PM4/1/22
to leafl...@googlegroups.com
I’ll have to see how I did my menus.   But you could certainly have links inside your paragraphs that would trigger map changes.  You could also have buttons inside the paragraphs.  

If u want u could email me directly
MarkStev...@gmail.com
Sent from my iPad

On Apr 1, 2022, at 10:51 AM, 'Bradley Skopyk' via Leaflet <leafl...@googlegroups.com> wrote:



Mark Lawton

unread,
Aug 19, 2022, 1:11:22 PM8/19/22
to leafl...@googlegroups.com
hello bradley,

I’m not sure if I got back to you about this.  How is the project going?
Mark

Reply all
Reply to author
Forward
0 new messages