Forem: Asim Mehmood Khan

Mapping Your Rails Journey: A Guide to Leaflet Integration

Asim Mehmood Khan — Mon, 27 May 2024 14:57:28 +0000

Using maps in your application is always the best way to showcase your skill and shine at the moment. Google Maps is one of the best-used maps in any application development, and while it is the best up-to-date map in the market, its only drawback is that it requires a billing payment and an active web URL hosted for it work properly, otherwise, it won't display the map correctly and show a development mode map where there is not much you can do about it.

There are many other alternatives to Google Maps, some of them are:

OpenStreetMap
Mapbox
HERE Technologies
TomTom Maps
Bing Maps
Leaflet

Leaflet with the OpenStreetMap is a good alternative if you know you're way around tweaking it and rooting out some of the issues of implementing it in ROR, then it is quite a feature to use. How did I discover Leaflet? By total accident really. Like all solutions and code blocks discovered by accident, I once googled an alternative to Google Maps and found Leaflet.

Simple to implement, totally compatible with all browsers, and no Javascript compiling or load issues where Javascript is not properly loaded.

Setting up Leaflet with ROR

Setting up the Leaflet with ROR was straightforward, you start by opening your application.html.erb file, and add the following to the layout.

<!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>

We will also be calling the script for the Leaflet right after the yield section, calling the script in the body section is the right place.

<%= yield %>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

Setting up your Model

Since I will be using the Properties model, I will first start by setting some validation for the latitude and longitude in the properties model class

validates :latitude, :longitude, presence: true

Word of advice, I learned it the hard way, and caused me a lot of pain while implementing the maps. Never use this line if you are using validation

attr_accessor :latitude, :longitude

There will always be a conflict between the validates and attr_accessor. The attr_accessor creates getter and setter methods that override the default behavior provided by Active Record, the Rails ORM library. By commenting attr_accessor we will allow the ActiveRecord to use its default methods for accessing and setting these attributes.

Setting up the View

Now let's setup the show.html.erb

<p style="color: green"><%= notice %></p>

<%= render @property %>

<div>
  <%= link_to "Edit this property", edit_property_path(@property) %> |
  <%= link_to "Back to properties", properties_path %>

  <%= button_to "Destroy this property", @property, method: :delete %>
</div>

After that we will setup a div container to hold the map and call in the script to retrieve and show the map along with the markers of the location based on the latitude and longitude. So we will set this up in property.html.erb

<!-- Include a unique identifier for the map container -->
  <div class="map-container" id="map-<%= property.id %>" style="width: 800px; height: 400px;"></div>

  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
      var mapElement = document.getElementById('map-<%= property.id %>');
      var latitude = <%= property.latitude || 37.7749 %>;
      var longitude = <%= property.longitude || -122.4194 %>;

      if (!isNaN(latitude) && !isNaN(longitude)) {
        // Initialize map if it hasn't been initialized yet
        if (!mapElement.classList.contains('map-initialized')) {
          var map = L.map(mapElement).setView([latitude, longitude], 13);

          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: 'OpenStreetMap'
          }).addTo(map);

          mapElement.classList.add('map-initialized');
        }

        // Add marker for this property
        L.marker([latitude, longitude]).addTo(map)
          .bindPopup('<%= j property.name %>');
      } else {
        mapElement.innerHTML = 'Location not provided for this property.';
      }
    });
  </script>

I know what you are thinking, this code could have been written better. Well I got news for you, You are right!!!. Moving on....

What the above code is doing is

var map = L.map(mapElement).setView([latitude, longitude], 13);

This initializes the map using Leaflet, setting the view to the provided latitude and longitude coordinates and a zoom level of 13.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {...}).addTo(map);

This adds a tile layer from OpenStreetMap to the map.

mapElement.classList.add('map-initialized');

This adds a class to the map container to indicate that the map has been initialized. And finally we can add markers to the map with the coordinates and the property name by binding it to the map.

L.marker([latitude, longitude]).addTo(map)
          .bindPopup('<%= j property.name %>');

Adding a marker to the map with latitude and longitude

This is the interesting part, we get to add some coordinates on the map and then save it the property data, we will be using _form.html.erb to setup the coordinates.

<div>
    <%= form.label :latitude %>
    <%= form.hidden_field :latitude, id: 'latitude', value: @property.latitude || 37.7749 %>
  </div>

  <div>
    <%= form.label :longitude %>
    <%= form.hidden_field :longitude, id: 'longitude', value: @property.longitude || -122.4194 %>
  </div>

  <div style="width: 800px; height: 400px;" id="map"></div>

  <script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    var mapElement = document.getElementById('map');
    var latitude = parseFloat(mapElement.dataset.latitude) || 37.7749; // Default latitude
    var longitude = parseFloat(mapElement.dataset.longitude) || -122.4194; // Default longitude

    var map = L.map('map').setView([latitude, longitude], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: 'OpenStreetMap'
    }).addTo(map);

    var marker = L.marker([latitude, longitude], {draggable: true}).addTo(map)
      .bindPopup('<%= j @property.name %>')
      .openPopup();

    marker.on('dragend', function(event) {
      var lat = marker.getLatLng().lat;
      var lng = marker.getLatLng().lng;
      document.getElementById('latitude').value = lat;
      document.getElementById('longitude').value = lng;
    });

    map.on('click', function(event) {
      var lat = event.latlng.lat;
      var lng = event.latlng.lng;
      marker.setLatLng([lat, lng]);
      document.getElementById('latitude').value = lat;
      document.getElementById('longitude').value = lng;
    });

    // Submit the form when the user clicks a submit button
    var submitButtons = document.querySelectorAll('input[type="submit"], button[type="submit"]');
    submitButtons.forEach(function(button) {
      button.addEventListener('click', function() {
        var form = document.querySelector('form'); // Assuming there's only one form
        form.submit();
      });
    });
  });
</script>

Ugh, this code is ugly wish I was at another location than this one. Well lucky for us that is exactly what this code block does. If the property is getting updated then it is important to load the current latitude and longitude of the property on the map, or else point out to the default location. The below-mentioned event listener is triggered when the marker is dragged and dropped, updating the latitude and longitude values with the new marker position

marker.on('dragend', function(event) {
      var lat = marker.getLatLng().lat;
      var lng = marker.getLatLng().lng;
      document.getElementById('latitude').value = lat;
      document.getElementById('longitude').value = lng;
    });

The below-mentioned event listener is triggered when the map is clicked, moving the marker to the clicked location and updating the latitude and longitude values

map.on('click', function(event) {
      var lat = event.latlng.lat;
      var lng = event.latlng.lng;
      marker.setLatLng([lat, lng]);
      document.getElementById('latitude').value = lat;
      document.getElementById('longitude').value = lng;
    });

One unusual error I encountered is when submitting the button on the form, where the form would update the property data but not the marker's location on the map or show the new latitude and longitude. To address this issue it is important to add the event listener to the click event on the submit button on the form that would trigger the function to update the coordinates on the map.

var submitButtons = document.querySelectorAll('input[type="submit"], button[type="submit"]');
    submitButtons.forEach(function(button) {
      button.addEventListener('click', function() {
        var form = document.querySelector('form'); // Assuming there's only one form
        form.submit();
      });
    });

This is a simple approach to attaching and displaying the latitude and longitude on the map and pointing the marker on the map.

AI for Developers

Asim Mehmood Khan — Sun, 05 Nov 2023 15:06:09 +0000

The age of Artificial Intelligence has arrived and has taken the entire tech world by storm, helping small businesses to make the most of the AI to make them strive and expand their operations and launch their products successfully, and other small operating businesses struggling to streamline their operations and services. With all the wonders and beauty of AI making huge strides and impact, the developers at large are also at risk that the jobs they have might get replaced by AI, as recently announced by IBM they intend to replace around 2500 to 4000 of their workforce with AI.

That is not true, because if that was the case then the CEO would not had to reiterate and renounce his plans and expectations later on as it was not feasible or possible. That is a story for another day, with the innovation and introduction of the AI developers and programmers can also make their lives way easier with the help of some of the latest and new platforms to make their developing journey and conquest easier.

Let our exploration begin

TabNine

Get a chance to experience few bugs and a reusable code with less writing programming code by adopting the most widely used practices aimed at simplicity, reduction in code overhead and greater quality codebase.

Tab Nine will give you the chance of delivering faster code and help you accelerate your delivery process using best code snippets provided by million of users and peers that works very well, and help you stay ahead of the competition.

Tab Nine will also help with training and onboarding new employees with it’s AI assistant, reducing the workload on senior developers helping them focus on their main line of work and assignments while new members get trained to use the organization’s codebase.

You can easily integrate it with various and number of IDEs that simply just injects themselves with the massive codebase library and snippets to help you program and write just simply efficient and faster code.

The only drawback is that such great features comes with a price, check out there pricing model and select the one that suit you.

CodeWars

If you want to excel and improve your programming and development skills, then code wars is just the right place for you. With loads of tutorials and coding challenges and exercises, code wars will help you build confidence and continue to hone your skills that makes your programming life just simply awesome.

Partnered with various coding schools, with Coding Dojo leading from the front. These boot camps aim to make you challenge yourself and get yourself out of your comfort zone and take yourself to the next step and level.

Code Wars will always stand apart, which is a collective effort by it’s users enabling kata to teach and educate you on various techniques to solving algorithms and problems.

Code::Stats

With Code::Stats you can track your progress and productivity, gamify your coding by giving yourself points whenever you achieve a milestones. View statistics and metrics of your coding progress much just like GitHub, you can choose to keep your code private or public and integrate this cool service with your IDE.

Amazon Code Guru

Amazon Code Guru Security is a security testing tool for static applications that combines machine learning and automated service to detect threats and issues in your code. It uses it’s ML algorithm to help you fix your issues and weakness and track the their status within your code. This great tool helps developers find their most expensive line of code that consumes lots of resources and improve the code to increase efficiency and performance, and reduce chances of threats and attacks to the code, within minimum computer cost.

Code Guru Security also borrows from AWS security best practices and training on millions of code vulnerability assessments within Amazon. Code Guru Security can then identify code vulnerabilities with a very low false-positive rate. To begin reviewing code, you can associate your existing code repositories on GitHub, GitHub Enterprise, Bitbucket, or AWS Code Commit in the Code Guru console.

Attract more, Get more — The new tool in Marketing

Asim Mehmood Khan — Sat, 04 Nov 2023 18:31:50 +0000

Writing an email is the most important task that is carried out on a regular basis and conveys messages to a larger audience and single individuals alike. This is the most common form of communication to convey important messages, events, and articles to people of interest and community.

Writing and creating a compelling and interactive email can make a huge difference between delivering the message with the right tone and attract the right target audience, or hit a miss and lose out on potential contracts and buyers.

Generating and writing a compelling email is an art and not everyone has that gift, but everyone can always find a way to design and create a beautiful template to attract viewers and readers. GetResponse provides an intuitive email creator to design and deliver your emails to your audience that provides content and attraction. Let’s face it beautiful and responsive emails makes all the difference in the world and that is a reality. Simple and contextual emails just don’t cut it anymore.

The perfect email creator not only helps in providing a perfect message and template but also can help to engage your audience and attract more clients to help your business grow and flourish, with the use of professional email marketing campaigns and the best part about this cool service that you do not need to be professional and an expert web developer.

What is in the package?
You have a great idea and a concept in mind the problem is that you do not know how to paint that beautiful canvas or bring your vision to life. too little support and tools are out there to help you with your dreams, and if they do provide any options then that is just going to drain your pockets, and the promise that whether that works. GetResponse provides something that let’s you get ahead the curve against your competitors.

Powerful design features — with a powerful design tool that simply lets you start picking backgrounds, templates, photos and logos and simply place them on the canvas, with the ability to modify, edit any part of the template to the lighting, shade, and design you like. Helping you to place your message and text over the canvas to get the special attraction for your audience.

Deliver email with ease — simply pick up a schedule and time along with the list of email recipients that you want to send your message across and let the magic happen. GetResponse with it’s complete automated and trusted delivery tools will ensure that message is delivered and also prevent the emails to head into spams. The best part about it that you can send these email multiple times during the day or week.

Best templates — using predefined templates, over 20000 in stock photos, images and gifs, use the best online photo editor, mobile focused designs and images, with no extra purchases required. Easily modify and edit those stock photos and templates to create the perfect email you need.

One tool to rule them all — using the best customized and goal oriented templates and campaigns, GetResponse will provide you with the best email marketing campaign to help your business and product launch further as expected. Easy to use and help optimize the campaign to get more turn over and clicks.

Is that it?
Perfect timing and scheduling

GetResponse just doesn’t stop there, the optimized delivery tools used for automating email delivery provides perfect timing tool that sends emails at a time your audience is likely to engage. So it is a good idea to use the time travel delivery method to keep your mail on top of the inbox.

Personalized content experience

Dynamic content is a thing in today’s modern era of email marketing and using those contents are highly recommended. GetResponse will offer huge library of contents and here is the big stuff, it will automatically suggest products and services based on your contact list. Understanding your client and purpose, GetResponse is going to get you the right stuff to make your service and content more engaging.

The perfect campaigner

Get more traffic and drive more revenue visiting your landing pages, promoting webinars across your email contact list is the best feature to work seamlessly and integrated with your service.

Let’s add a little cherry on top

With GetResponse Email creator you can get an extra mile more while running A/B tests to learn what clicks with your clients and audience, monitor your rates and clicks with statistics, connect google analytics account for advance insights, use your spam checker and keep your deliverability at a higher rate.

The high-quality unfastened website builder you may ever need

Asim Mehmood Khan — Wed, 06 Sep 2023 11:58:20 +0000

Sorry Web developers, building a world class website just got a whole lot easier.

Having a commercial enterprise presence online and a nice web portfolio could make a large difference for your personal branding and commercial enterprise increase.

Since the era of internet began, each commercial enterprise and man or woman have usually wanted to have an online presence and be noticed for their performance and paintings. Surely, the worldwide outreach is greater with a wider target market. In the olden days, living in a single community with a closed society and single market, the strategy to sell items to purchasers was fairly easy, because expertise about the demographic was not so complex.

With the broader global outreach and a much wider target audience thanks to a touch of magic called the world wide web, to attract a larger target audience and to know a bigger demographics just got a lot more difficult than ever and a new approach to attract and sell items have turn out to be an uphill assignment.

In the very near but not so distant future, AI will equip and assist us reach that closing advertising and marketing degree and demographics, if you ever find one out holla at me, I need in on the action too. Having a worldwide presence gives you some gain

Larger Audience View — You get to have greater views
Profile and Personal Display — Expert show of labor and offerings
Product Catalog — Show of offerings and items to sell
Online Platforms — International on line network of experts and organizations

Get Response — Website Builder

Get response will let you acquire all this and plenty extra, prevent reading and head over to their amazing website builder that will assist you creating an online profile in order to make your presence over the internet.

Build your page in minutes with the help of AI and start promoting your business.

No code solution — Build your website with help of AI and promote your business
Absolute Design — Use creative tools offered by GetResponse and build your dream website
Industry Templates — Use the predesigned and prebuilt templates that helps you to promote your business
Marketing Automation — Complete marketing tools to promote your business online and bring in revenue

Get busy building your dreams and start dragging and dropping your ideas on that beautiful canvas and let’s start bring you closer to your people and share your vision.

Get in touch with Get Response Free plan.

Get Response is changing the way how Email Marketing works

Asim Mehmood Khan — Tue, 29 Aug 2023 13:13:50 +0000

Seeking out the high-quality e-mail advertising platform then it instances to get reaction.

Get extra opens, clicks and sales.

Effective email advertising software with a extensive variety of electronic mail templates and an AI e mail generator to help you get started out.

Starting an electronic mail marketing campaign and staying targeted and updated with the today’s developments and preserving your viewers informed in a ache staking workout with little to no reward mainly with out a strategy or vision in place.
E mail campaigns are simply now not just setting the details right into a unmarried e-mail record and sending it out through your electronic mail listing. Your campaign wishes to have a tale, an idea, something that the target market desires to listen. Like a chef could need to understand the best recipe for a medium rare steak or an auto car mechanic trying to fine tune it is vehicle engine. The trick is to get worried, get emotional and tell a tale that connects you, your product and them.

What is Email Marketing?

However what’s electronic mail advertising and marketing? To ship out an e-mail message to a purchaser or listing of customers, that is what maximum of us consider it’s miles proper. Absolutely positioned, email marketing is a right away form of communication where the emails build up relationships and sell merchandise to a wider audience.
That is wherein it’s miles essential to have an effective e mail application retaining the target market engaged and properly informed., turning window customers to potential buyers and even brand advocates to your merchandise.
Being round for extra than 50 years and an impressive ROI of extra than 3800% as of 2021, electronic mail advertising has grow to be one of the most effective virtual communications, suitable for businesses of any length, small and large.

Benefits of Email Marketing

Low value — sure, it’s miles simply very cheap, you want an email provider company and a massive creativity talent saved in your mystery vault to make magic manifest.

Complete manipulate — you control your ideas, content material and everything you type onto the display together with your keyboard.

Precision — knowing the proper target audience and the proper goal ensures more probabilities of success than ever.

Ease of use — add templates, keep your touch list, set timers and auto responses. What should cross incorrect.

Favored advertising and marketing medium — with no problem to setup and no digital corporation and provider required, that is the high-quality medium today for advertising.

Greater outreach — whether you are on a laptop, laptop, pill, or cellular your message is delivered on all devices all over the globe.

The innovative email marketing is here — Get Response Email Marketing

Yep you bought that proper, Get response is right here, to set the document immediately and to make electronic mail advertising even more thrilling than ever.

An email advertising and marketing software program that makes all of your desires come genuine. Whether or not you’re going for walks a small enterprise or a huge one, into training and session with the need to grow your target market and sell more to your customers.

Pros of Get Response Email Marketing

A number of the first-rate capabilities of Get Response Email Marketing offers:

Loose plan that will help you get began together with your dreams.

An intuitive drag and drop e mail editor with precompiled templates to make you stand out of the crowd.

Computerized carrier that will help you send and create emails.

Bureaucracy, pop ups, touchdown pages, websites, webinars and funnels to construct your on-line presence.

Live chats, net notifications, SMS messages to attain larger audience.

Transactional emails in case you are going for walks an ecommerce keep with the entirety under on roof.