Google Maps No Roads in BS Modal

Google Maps is one of the sweetest tools I have ever got to use. I loved it since our first date 7 years ago as an engineering student. But since, my involvement has been minimal. I had the pleasure to play with Google Maps yesterday. This time it also involved Google Street View. This is about a problem that bugged me for a few minutes.

Summary

Make sure you run the map init on the modal show.

# Waiting for the modal to show. If it is not a modal
# then make sure to watch for the completion of the
# element rendering.
modal.on 'shown.bs.modal', ->
  center = new google.maps.LatLang(lat, lng)
  map = new google.maps.Map document.getElementById('map'),
    center: center,
    zoom: 12
  street = new google.maps.StreetViewPanorama
  # rest of the code

I had done some thing like this…

$('[data-trigger="street-view-modal"]').on 'click', ->
  # code before

  modal.show()

  # Note that the modal will not show immediately. Instead
  # we should use the 'shown.modal.bs' event to init the
  # Google map.

  center = new google.maps.LatLang(lat, lng)
  map = new google.maps.Map document.getElementById('map'),
    center: center,
    zoom: 12

  # rest of the code

TL;DR

Background

I had a table with a Google Street View image on display of locations of interest. The admin will click on the image and it will open a Bootstrap modal with the Google Street View and Google Maps pared. The user will use the map to position the user and street view will be used to get POV heading and POV pitch. Given we know the latitude and longitude we can generate an image which we use temporarily.

Symptoms

The Google map was firing, but

  • There were no roads and the background was grey.
  • When center the map, it would go to the top left corner.
  • Google Street View Panorama is working but seemed a bit broke

Problem

I had one modal in a list view. When a link is clicked I will show the modal + init the map in the same go. The map should be initialized once the dom is ready.

Once I used the event for the modal shown and initialized the map only then it worked as expected.

Hoping this post was of help, happy hacking!

SLMC Bombed - How convenient!

Doctors (GMOA in particular) have been in the spot light. They launched an island wide inconveniencing hundreds of thousands of patients in dire need of medical attention. The they tried to raise black flags in Vesak. The people responded they should rather shove the flags up their arses. Not many days from then a bomb lands in their head office…

Here are the important points of the news coverage…

  • A grenade
  • No CCTV coverage of the incident
  • Grande didn’t blow
  • Happened at night

There is only one thing I need to say how convenient!.

History in short

  • Doctors strike against free Indian ambulance service - many lives saved for today
  • Doctors strike against reducing car-permits to once in 10 years - to reduce tax on poor
  • Doctors strike when automobile taxes increased by Rs. 5000 - to reduce tax on poor
  • Doctors strike against nurses receiving degrees
  • Doctors stops lecturing AHS students at University of Peradeniya (so much for free education)
  • Doctors against allied-health-science (AHS) degree

I bet I missed a lot! But that is all for now!

Multi Subdomain Rails 5 App

I am involved building a SaaS application for Brevica, a US based firm, an app called Church Foyer. Last week I was implementing subdomain based multi-tenancy. For example, you can create a tenant with your own personalized subdomain. That is a cool feature, but I will talk about that later. I am going to pull an example from my personal website.

Here I am going to show you how you can create a single app that has multiple sub-domains. For example:

  • admin.example.com : the admin dashboard
  • blog.example.com : the blog etc

I recommend breaking down a large app to smaller, more manageable apps. But if that is not your interest, this is how you are going to do it. Here I will present you…

  • Session management
  • Rails 5 routing constraints
  • A basic Nginx config for subdomain based Rails app

Step 1: Subdomain Session management

We don’t want our users to login to every single subdomain our app has, agreed? Then we need to configure Rails session store allow this. You can do some thing going in line with…

Rails.application.config.session_store :cookie_store,
                                       key: '_jdeencom_session',
                                       domain: {
                                         production: '.jdeen.com',
                                         development: '.jdeen.dev'
                                       }.fetch(Rails.env.to_sym, :all)

This will allow sessions created in, lets say www.jdeen.com, be available in, blog.jdeen.com, should the user need to comment on a blog post.

Step 2: Routes and Routing Constraints

Next you will need to define routes that have constraints constraints. This constraints should be in the subdomain level. For example we will need to redirect the request to / when the request is for example blog.example.com to blog#index action.

Rails.application.routes.draw do
  # ...
  constraints JDeen::Constraints::Blog do
    root 'blog#index'
  end
  # ...
end
# JDeen website main namespace
module JDeen 
  # Routing constraints
  module Constraints
    # Constraints for the blog subdomain
    class Blog
      # Checks if a request to the Rails app matches the blog
      def self.matches?(request)
        request.subdomain.present? && request.subdomain == 'blog'
      end
    end
  end
end

Step 3: Nginx config

The next is, we would need minor changes to a general Nginx config file. Just notice the * in front of the server name below.

cat /etc/nginx/sites-enabled/jdeen.dev
server {
  listen 80;
  server_name jdeen.dev;
  return 301 $scheme://www.jdeen.dev$request_uri;
}

upstream jdeendev {
    server localhost:3500 max_fails=3 fail_timeout=30;
}


server {
    listen 80;
    server_name *.jdeen.dev;

    root /home/ziyan/Work/JDeen/JDeen;

    try_files $uri/index.html $uri @jdeendev;

    location @jdeendev {
        proxy_pass http://jdeendev;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
    }

    error_page 500 502 503 504 /500.html;
    client_max_body_size 4G;
    keepalive_timeout 10;
}

Thats it and you should be good to go! Unless I missed some thing :relaxed:

A Happy New Year To You

This is one of the most important times of the year for a Sri Lankan. It is the Sinhalese and Hindu new year, the local new year. It is an important time in the year for me and my family, we are Malay Muslims though. I make this an opportunity to wish you a happy new year, regardless of your ethnicity and your religion.

The generally accepted new year is just a change in calendar numbers. People get excited for no apparent reason. The Sinhalese and Hindu new year is different. It reassembles the transition of the sun from Pisces to Aries. You can read a lot more abut the festival here.

I am looking forward to prepare milk rice and enjoy some Kavum, Kokis and other tasty sweets.

While I wish you a wonderful new year, I hope you will be able to accomplish your dreams in the year to come.

Coke vs Pepsi - Halloween

Some would say peace is good, but some times war is interesting. I don’t mean armed conflict but the competition between humans.

Here is some thing interesting post I found from the HubSpot blog.

Pepsi vs Coke

I guess this is when we have to say Coke - 1 : Pepsi - 0.

Enjoy your Thursday, time to dive in my new Ruby project.