Jump to content

MAP with multiple locations

Recommended Posts

  • Replies 2
  • Views 724
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 3 weeks later...

@tuanphanWere you able to help @BDG with this? I'd also love to know the answer to this one. We're trying to show multiple locations of testing facilities for a client with locations throughout Wisconsin. I tried using Folio to create a map with the intention of embedding it within a Squarespace site, but that didn't quite work as planned. (The Code embed seemed to mess with other parts of the site.)

If you'd like to take a look, I've attached a PNG image the map I created showing one of the hovered-over pins. Right now it only has 8 locations, but the number will increase over time. I'd love your thoughts!

Here's the code that was used, too.

 

<!DOCTYPE html>
<html>
<head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_7044ac96c09d919a5be7aa74b740915a {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;                
                }
                
                
                .leaflet-fade-anim .leaflet-popup {
	                opacity: 0;
	                -webkit-transition: opacity 0.2s linear;
	                -moz-transition: opacity 0.2s linear;
	                transition: opacity 0.2s linear;
	                width: 200px !important;
	            }

            </style>
        
</head>
<body>
    
    
            <div class="folium-map" id="map_7044ac96c09d919a5be7aa74b740915a" ></div>
        
</body>
<script>
    
    
            var map_7044ac96c09d919a5be7aa74b740915a = L.map(
                "map_7044ac96c09d919a5be7aa74b740915a",
                {
                    center: [44.5, -89.5],
                    crs: L.CRS.EPSG3857,
                    zoom: 7,
                    zoomControl: true,
                    preferCanvas: false,
                }
            );

            

        
    
            var tile_layer_cdf85b000aab66eb9cd901a7d4e90898 = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 18, "maxZoom": 18, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
            var marker_12fa991856d1b4ca8bdb906d0d147daf = L.marker(
                [43.0086369, -88.232888],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_a659c22b580cef00e9a73de70a848e8c = L.popup({"maxWidth": "100%"});

        
            var html_664e62df8fb5f7cee5ea08dcab729ac0 = $(`<div id="html_664e62df8fb5f7cee5ea08dcab729ac0" style="width: 100.0%; height: 100.0%;"><b>Waukesha Public Library</b><br>321 Wisconsin Ave, Waukesha, WI 53186<br>Bruce Gay, Director
Kerry Pinkner, Public Services Mgr.</div>`)[0];
            popup_a659c22b580cef00e9a73de70a848e8c.setContent(html_664e62df8fb5f7cee5ea08dcab729ac0);
        

        marker_12fa991856d1b4ca8bdb906d0d147daf.bindPopup(popup_a659c22b580cef00e9a73de70a848e8c)
        ;

        
    
    
            marker_12fa991856d1b4ca8bdb906d0d147daf.bindTooltip(
                `<div>
                     Waukesha Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_047db3fe965142544927b91283fe531a = L.marker(
                [45.4073486, -92.6445145],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_d02789cb41bd5de3eca5c55f8c6864a4 = L.popup({"maxWidth": "100%"});

        
            var html_adb018ace440e02b90a4eb1f4be3ac67 = $(`<div id="html_adb018ace440e02b90a4eb1f4be3ac67" style="width: 100.0%; height: 100.0%;"><b>St. Croix Falls Public Library</b><br>230 S Washington St, St Croix Falls, WI 54024<br>Su Leslie, Director</div>`)[0];
            popup_d02789cb41bd5de3eca5c55f8c6864a4.setContent(html_adb018ace440e02b90a4eb1f4be3ac67);
        

        marker_047db3fe965142544927b91283fe531a.bindPopup(popup_d02789cb41bd5de3eca5c55f8c6864a4)
        ;

        
    
    
            marker_047db3fe965142544927b91283fe531a.bindTooltip(
                `<div>
                     St. Croix Falls Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_ad93a483355048651d705183e73fc2ce = L.marker(
                [42.5594662, -87.8532093],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_90c7de1b945ae89c58b6bbc18459cceb = L.popup({"maxWidth": "100%"});

        
            var html_e17df3008b2e59fde59f141d8b598bc8 = $(`<div id="html_e17df3008b2e59fde59f141d8b598bc8" style="width: 100.0%; height: 100.0%;"><b>Kenosha Public Library</b><br>7979 38th Avenue, Kenosha, WI 53142<br>Barbara Brattin, Director & Sys. Director</div>`)[0];
            popup_90c7de1b945ae89c58b6bbc18459cceb.setContent(html_e17df3008b2e59fde59f141d8b598bc8);
        

        marker_ad93a483355048651d705183e73fc2ce.bindPopup(popup_90c7de1b945ae89c58b6bbc18459cceb)
        ;

        
    
    
            marker_ad93a483355048651d705183e73fc2ce.bindTooltip(
                `<div>
                     Kenosha Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_9bcd271393cc29d918e2e26940d6828d = L.marker(
                [43.9512716, -88.0958913],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_f8313b5564346e56b18357f7d19a1115 = L.popup({"maxWidth": "100%"});

        
            var html_517c653490bb3c7641d5caf08ab5012f = $(`<div id="html_517c653490bb3c7641d5caf08ab5012f" style="width: 100.0%; height: 100.0%;"><b>New Holstein Public Library</b><br>2115 Washington St, New Holstein, WI 53061<br>D Hankins, Director</div>`)[0];
            popup_f8313b5564346e56b18357f7d19a1115.setContent(html_517c653490bb3c7641d5caf08ab5012f);
        

        marker_9bcd271393cc29d918e2e26940d6828d.bindPopup(popup_f8313b5564346e56b18357f7d19a1115)
        ;

        
    
    
            marker_9bcd271393cc29d918e2e26940d6828d.bindTooltip(
                `<div>
                     New Holstein Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_c66e9ef648ba444a8f3418bb0625803f = L.marker(
                [44.5147024, -88.0101867],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_989e0c6fa57f7292aa73b01cec614226 = L.popup({"maxWidth": "100%"});

        
            var html_183ec80040979797c04609373e372f3e = $(`<div id="html_183ec80040979797c04609373e372f3e" style="width: 100.0%; height: 100.0%;"><b>Brown County Library</b><br>515 Pine Street, Green Bay, Green Bay, WI 54301<br>Danielle Zeamer, Library Associate
Sarah Sugden, Executive Director</div>`)[0];
            popup_989e0c6fa57f7292aa73b01cec614226.setContent(html_183ec80040979797c04609373e372f3e);
        

        marker_c66e9ef648ba444a8f3418bb0625803f.bindPopup(popup_989e0c6fa57f7292aa73b01cec614226)
        ;

        
    
    
            marker_c66e9ef648ba444a8f3418bb0625803f.bindTooltip(
                `<div>
                     Brown County Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_dacd66c28bc1aa91a5fd890591668590 = L.marker(
                [44.260082, -88.3637684],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_4c65c8b85895da6df148d67f949be223 = L.popup({"maxWidth": "100%"});

        
            var html_8f0420b4652798653ee654ab03d2d204 = $(`<div id="html_8f0420b4652798653ee654ab03d2d204" style="width: 100.0%; height: 100.0%;"><b>Appleton Public Library</b><br>3000 E. College Avenue, Appleton, WI 54915<br>Tasha Saeker, Assistant Director
Colleen Rortvedt, Director</div>`)[0];
            popup_4c65c8b85895da6df148d67f949be223.setContent(html_8f0420b4652798653ee654ab03d2d204);
        

        marker_dacd66c28bc1aa91a5fd890591668590.bindPopup(popup_4c65c8b85895da6df148d67f949be223)
        ;

        
    
    
            marker_dacd66c28bc1aa91a5fd890591668590.bindTooltip(
                `<div>
                     Appleton Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_04b8dcbd93e590f504f7ea47650ec27e = L.marker(
                [43.0136017, -89.288265],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_065f16f1a136b82d75f3a49448213e85 = L.popup({"maxWidth": "100%"});

        
            var html_5a4297b2918064dcc34257460e04a7fc = $(`<div id="html_5a4297b2918064dcc34257460e04a7fc" style="width: 100.0%; height: 100.0%;"><b>E.D. Locke Public Library</b><br>5920 Milwaukee St., McFarland, WI 53558<br>Heidi Cox, Director</div>`)[0];
            popup_065f16f1a136b82d75f3a49448213e85.setContent(html_5a4297b2918064dcc34257460e04a7fc);
        

        marker_04b8dcbd93e590f504f7ea47650ec27e.bindPopup(popup_065f16f1a136b82d75f3a49448213e85)
        ;

        
    
    
            marker_04b8dcbd93e590f504f7ea47650ec27e.bindTooltip(
                `<div>
                     E.D. Locke Public Library
                 </div>`,
                {"sticky": true}
            );
        
    
            var marker_7df97020dd0cde9a2ae41f05e2df55ff = L.marker(
                [43.847378, -88.8392248],
                {}
            ).addTo(map_7044ac96c09d919a5be7aa74b740915a);
        
    
        var popup_9434448774c29579e864d74b3d368369 = L.popup({"maxWidth": "100%"});

        
            var html_f2527ac103c937d092004b1270c82369 = $(`<div id="html_f2527ac103c937d092004b1270c82369" style="width: 100.0%; height: 100.0%;"><b>Ripon Public Library</b><br>120 Jefferson St, Ripon, WI 54971<br>Susie Menk, Adult & Teen Services Lib.</div>`)[0];
            popup_9434448774c29579e864d74b3d368369.setContent(html_f2527ac103c937d092004b1270c82369);
        

        marker_7df97020dd0cde9a2ae41f05e2df55ff.bindPopup(popup_9434448774c29579e864d74b3d368369)
        ;

        
    
    
            marker_7df97020dd0cde9a2ae41f05e2df55ff.bindTooltip(
                `<div>
                     Ripon Public Library
                 </div>`,
                {"sticky": true}
            );
        
</script>
</html>

 

Screenshot 2024-06-17 at 7.51.27 AM.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.