switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    buddy coding
    Buddy Coding And Talking It Through
    Feb 16, 2022
    how to only display events from database for fullcalendar on livewire
    How To Only Display Events From Database For FullCalendar On Livewire
    Feb 28, 2022

    The Basics Of Using Leaflet.js With Open Street Maps

    Categories
    • Languages / Tech areas
    • Mobile Application Development
    • Software Development
    • Web Development
    Tags
    • javascript
    • leaflet
    • leaflet.js
    • open street maps
    the basics of using leaflet
    the basics of using leaflet

    Recently I was put on a project that required me to visually display the user location. The Google maps API would generally be the go to for anyone who has to integrate a map view into an application. One of the major flaws of using google maps is that you would need to pay for their service. This is why I started using Leaflet.js with Open Street Maps (OSM). OSM is an open source API that is maintained by people of the community. I am not saying this is better than using the Google maps API. It was just one of the free options we decided to go with.

    In this blog I'll be going over the basics with Leaflet.js. Something I should mention is that having knowledge of the Javascript language for this blog is extremely advantages as we are diving into a Javascript based library. With that being said there is no harm reading and following along as I go through it.

    Now that the boring introduction is done. I want to start with all the ways you can add Leaflet.js to your project. (Please note some methods might be skipped in this blog post but you can give the Leaflet.js documentation a look for anything you want to know).

    Let's start with the most simple way, the Leaflet.js CDN:

    All you need to do is add this to your head tag and you are ready to start building your map view.

    <rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> 
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    

    Or you could use the node package manager to install Leaflet.js:

    npm install leaflet
    

    However for the sake of this example I went with the simplest way, Using the CDN for Leaflet.js.

     

    Map Setup

    Step 1 - Now that we have the Leaflet.js framework setup we should start with where we want our map to be displayed. This can be done by creating a <div> element with an id that can be anything but for this example I set the id="map". Here's an example of what I mean:

    <!-- Body -->
    <body style="background-color: #333;">
        <!-- This is where you define where your map will be displayed -->
        <div 
        id="map"
        style="
              background-color: white;
              position: absolute;
              height: 750px;
              width: 900px;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
        "></div>
    
    </body>
    

    If you followed the above example you should see this:

    I know it seems lame right? Well now that we have a place for our map to be displayed we can start implementing some leaflet.js code.

     

    Step 2 - For the next step we will be diving into some Javascript as its required to set the content in our <div> element that we created (The white box).

    Simply add this code to your script and you will notice something interesting that will happen to your map <div> element:

    var map = L.map('map').setView([0, -0], 4);
    
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        maxZoom: 11, // sets the maximum zoom 
        minZoom: 2, // sets the minimum zoom 
        tileSize: 512, // The tile size
        zoomOffset: -1, 
    }).addTo(map);
    

    This is what you should see after you have added the above code:

     

    If you are seeing a map populate the <div> element, then congratulations you have implemented a simple map into your application.

     

    Map Markers

    Now you may be thinking, what if I wanted to add markers to the map for a specific location? The answer is actually quite easy.  Leaflet.js provides a very simple and easy to read set of functions that handle our markers. Allow me to show you an example:

    This is the most simple way to setup a marker:

    L.marker([-31.353636941500987, 21.4453125]) // [longitude, latitude]  the coordinates shown on this example points to South Africa
    .addTo(map);
    

    If this is something you have taken interest in, then you can checkout the Leaflet.js documentation as it provides so much more information that I haven't included.

    To name a few topics that might be of interest:

    • Adding event listeners to markers.
    • Adding the ability to drag and drop markers.
    • Adding popups to your map.
    • ...and so much more.

     

    Conclusion

    Personally I enjoyed working with Leaflet.js and most certainly will be using it again when the opportunity presents itself. Thanks for giving this a read I hope this helped or at the very least I hope you found this to be a worthwhile read.

    Contact us


      Related posts:

      javascript basicsJavaScript Basics laravel livewireLaravel Livewire errors in app insightsUnhandled Promises Sent Through To App Insights In Node JS easily view your laravel logs using laravel log viewerEasily View Your Laravel Logs Using Laravel Log Viewer
      Share
      0
      Collin Yarrington
      Collin Yarrington
      Collin is a software developer for Lava Lamp Lab. For him there is no obstacle too big. Learning to improve and overcome those obstacles is what drives him forward.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy