JSFiddle - React, Tailwind, and code Playground

by Jigar Dafda

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.5.0/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<div ng-app="app">
    <ul>
        <li><a ui-sref="rome">Rome</a>

        </li>
        <li><a ui-sref="bern">Bern</a>

        </li>
    </ul>
    <div ui-view></div>
</div>

CSS

ol-map {
    width: 500px;
    height: 300px;
    display: block;
}
ul {
    padding: 0px;
}
ul li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
}

JavaScript

var app = angular.module('app', ['ui.router']);

app.run(function ($templateCache) {
    var homeHtml = '<div>' +
        '<h4>Rome Page</h4>' +
        '<p> this is rome </p>' +
        '<p ng-bind="map"></p>' +
        '<div> <ol-map center="rome" on-initialized="mapInitialized(map)"></ol-map> </div>' +
        '</div>';
    $templateCache.put('rome.html', homeHtml);

    var otherHtml = '<div>' +
        '<h4>Bern Page</h4>' +
        '<p> this is bern</p>' +
        '<p ng-bind="map"></p>' +
        '<div> <ol-map center="bern" on-initialized="mapInitialized(map)"></ol-map> </div>' +
        '</div>';
    $templateCache.put('bern.html', otherHtml);
});

app.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/rome");

    $stateProvider.state('rome', {
        url: "/rome",
        templateUrl: "rome.html",
        controller: function ($scope, $timeout) {
            $scope.rome = ol.proj.fromLonLat([12.5, 41.9]);

            $scope.mapInitialized = function (map) {
                console.log(map)
                $scope.map = map;
                // Do something with object map object.
            };
        }
    }).state('bern', {
        url: "/bern",
        templateUrl: "bern.html",
        controller: function ($scope) {
            $scope.bern = ol.proj.fromLonLat([7.4458, 46.95]);

            $scope.mapInitialized = function (map) {
                console.log(map);
                // Do something with object map object.
            };
        }
    });
});


app.directive('olMap', function () {

    return {
        restrict: 'E',
        scope: {
            center: '=',
            onInitialized: '&'
        },
        link: function (scope, ele, attr) {

            var map = new ol.Map({
                view: new ol.View({
                    center: scope.center,
                    zoom: 6
                }),
                layers: [
                new ol.layer.Tile({
                    source: new...