├── README.md ├── .DS_Store ├── css ├── .DS_Store ├── images │ ├── markers-matte.png │ ├── markers-plain.png │ ├── markers-soft.png │ ├── markers-shadow.png │ ├── markers-soft@2x.png │ ├── markers-matte@2x.png │ └── markers-shadow@2x.png ├── style.css └── leaflet.awesome-markers.css ├── G-4398.json ├── G-3215.json ├── G-6833.json ├── G-2333.json ├── G-8723.json ├── address.json ├── js ├── leaflet.awesome-markers.min.js └── main.js └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Leaflet-based-Javascript-Mapper-App -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/.DS_Store -------------------------------------------------------------------------------- /css/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/.DS_Store -------------------------------------------------------------------------------- /css/images/markers-matte.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-matte.png -------------------------------------------------------------------------------- /css/images/markers-plain.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-plain.png -------------------------------------------------------------------------------- /css/images/markers-soft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-soft.png -------------------------------------------------------------------------------- /css/images/markers-shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-shadow.png -------------------------------------------------------------------------------- /css/images/markers-soft@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-soft@2x.png -------------------------------------------------------------------------------- /css/images/markers-matte@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-matte@2x.png -------------------------------------------------------------------------------- /css/images/markers-shadow@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Big-Silver/Leaflet-based-Javascript-Mapper-App/HEAD/css/images/markers-shadow@2x.png -------------------------------------------------------------------------------- /G-4398.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "G-4398", 3 | "name": "UiPath", 4 | "address1": "7171 Southwest Pkwy", 5 | "address2": "", 6 | "city": "Austin", 7 | "state": "TX", 8 | "zip": 78735, 9 | "country": "US", 10 | "color": "red", 11 | "cargo": "Microchips" 12 | } 13 | -------------------------------------------------------------------------------- /G-3215.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "G-9341", 3 | "name": "UiPath", 4 | "address1": "90 Park Ave", 5 | "address2": "20th Floor", 6 | "city": "New York", 7 | "state": "NY", 8 | "zip": 10016, 9 | "country": "US", 10 | "color": "red", 11 | "cargo": "Software" 12 | } 13 | -------------------------------------------------------------------------------- /G-6833.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "G-6833", 3 | "name": "TwitchTV", 4 | "address1": "225 Bush St", 5 | "address2": "", 6 | "city": "San Francisco", 7 | "state": "CA", 8 | "zip": 94104, 9 | "country": "US", 10 | "color": "green", 11 | "cargo": "Software" 12 | } 13 | -------------------------------------------------------------------------------- /G-2333.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "G-2333", 3 | "name": "Swagelok", 4 | "address1": "32100 Diamond Pkwy", 5 | "address2": "Ste 1488", 6 | "city": "Solon", 7 | "state": "OH", 8 | "zip": 44139, 9 | "country": "US", 10 | "color": "red", 11 | "cargo": "Tube Fittings" 12 | } 13 | -------------------------------------------------------------------------------- /G-8723.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "G-8723", 3 | "name": "GE Gas Turbine", 4 | "address1": "300 Garlington RD", 5 | "address2": "", 6 | "city": "Greenville", 7 | "state": "SC", 8 | "zip": 29615, 9 | "country": "US", 10 | "color": "blue", 11 | "cargo": "Gas Turbines" 12 | } 13 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | height: 100%; 3 | } 4 | 5 | .container-fluid { 6 | height: 100%; 7 | } 8 | 9 | #mapid { 10 | height: 60%; 11 | } 12 | 13 | tbody { 14 | font-size: 12px; 15 | } 16 | 17 | .close { 18 | position: absolute; 19 | width: 17px; 20 | height: 17px; 21 | opacity: 0.3; 22 | right: 30px; 23 | } 24 | .close:hover { 25 | opacity: 1; 26 | } 27 | 28 | .close:before, .close:after { 29 | position: absolute; 30 | left: 15px; 31 | content: ' '; 32 | height: 17px; 33 | width: 2px; 34 | background-color: #333; 35 | } 36 | 37 | .close:before { 38 | transform: rotate(45deg); 39 | } 40 | 41 | .close:after { 42 | transform: rotate(-45deg); 43 | } 44 | 45 | .display-none { 46 | display: none; 47 | } 48 | 49 | .leaflet-popup-content p { 50 | margin: 10px 0! important; 51 | } 52 | 53 | .leaflet-popup-content .select-button { 54 | width: 70px; 55 | height: 35px; 56 | font-size: 12px; 57 | } -------------------------------------------------------------------------------- /address.json: -------------------------------------------------------------------------------- 1 | [{ 2 | "id": "G-1937", 3 | "name": "GE Aeroderivatives", 4 | "address1": "16415 Jacintoport Blvd", 5 | "address2": "", 6 | "city": "Houston", 7 | "state": "TX", 8 | "zip": 77015, 9 | "country": "US", 10 | "color": "red", 11 | "cargo": "Aeroderivatives" 12 | }, 13 | { 14 | "id": "G-2333", 15 | "name": "Swagelok", 16 | "address1": "32100 Diamond Pkwy", 17 | "address2": "Ste 1488", 18 | "city": "Solon", 19 | "state": "OH", 20 | "zip": 44139, 21 | "country": "US", 22 | "color": "red", 23 | "cargo": "Tube Fittings" 24 | }, 25 | { 26 | "id": "G-9341", 27 | "name": "UiPath", 28 | "address1": "90 Park Ave", 29 | "address2": "20th Floor", 30 | "city": "New York", 31 | "state": "NY", 32 | "zip": 10016, 33 | "country": "US", 34 | "color": "red", 35 | "cargo": "Software" 36 | }, 37 | { 38 | "id": "G-4398", 39 | "name": "UiPath", 40 | "address1": "7171 Southwest Pkwy", 41 | "address2": "", 42 | "city": "Austin", 43 | "state": "TX", 44 | "zip": 78735, 45 | "country": "US", 46 | "color": "red", 47 | "cargo": "Microchips" 48 | }, 49 | { 50 | "id": "G-6833", 51 | "name": "TwitchTV", 52 | "address1": "225 Bush St", 53 | "address2": "", 54 | "city": "San Francisco", 55 | "state": "CA", 56 | "zip": 94104, 57 | "country": "US", 58 | "color": "green", 59 | "cargo": "Software" 60 | }, 61 | { 62 | "id": "G-8723", 63 | "name": "GE Gas Turbine", 64 | "address1": "300 Garlington RD", 65 | "address2": "", 66 | "city": "Greenville", 67 | "state": "SC", 68 | "zip": 29615, 69 | "country": "US", 70 | "color": "blue", 71 | "cargo": "Gas Turbines" 72 | } 73 | ] -------------------------------------------------------------------------------- /js/leaflet.awesome-markers.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | Leaflet.AwesomeMarkers, a plugin that adds colorful iconic markers for Leaflet, based on the Font Awesome icons 3 | (c) 2012-2013, Lennard Voogdt 4 | 5 | http://leafletjs.com 6 | https://github.com/lvoogdt 7 | *//*global L*/(function(e,t,n){"use strict";L.AwesomeMarkers={};L.AwesomeMarkers.version="2.0.1";L.AwesomeMarkers.Icon=L.Icon.extend({options:{iconSize:[35,45],iconAnchor:[17,42],popupAnchor:[1,-32],shadowAnchor:[10,12],shadowSize:[36,16],className:"awesome-marker",prefix:"glyphicon",spinClass:"fa-spin",icon:"home",markerColor:"blue",iconColor:"white"},initialize:function(e){e=L.Util.setOptions(this,e)},createIcon:function(){var e=t.createElement("div"),n=this.options;n.icon&&(e.innerHTML=this._createInner());n.bgPos&&(e.style.backgroundPosition=-n.bgPos.x+"px "+ -n.bgPos.y+"px");this._setIconStyles(e,"icon-"+n.markerColor);return e},_createInner:function(){var e,t="",n="",r="",i=this.options;i.icon.slice(0,i.prefix.length+1)===i.prefix+"-"?e=i.icon:e=i.prefix+"-"+i.icon;i.spin&&typeof i.spinClass=="string"&&(t=i.spinClass);i.iconColor&&(i.iconColor==="white"||i.iconColor==="black"?n="icon-"+i.iconColor:r="style='color: "+i.iconColor+"' ");return""},_setIconStyles:function(e,t){var n=this.options,r=L.point(n[t==="shadow"?"shadowSize":"iconSize"]),i;t==="shadow"?i=L.point(n.shadowAnchor||n.iconAnchor):i=L.point(n.iconAnchor);!i&&r&&(i=r.divideBy(2,!0));e.className="awesome-marker-"+t+" "+n.className;if(i){e.style.marginLeft=-i.x+"px";e.style.marginTop=-i.y+"px"}if(r){e.style.width=r.x+"px";e.style.height=r.y+"px"}},createShadow:function(){var e=t.createElement("div");this._setIconStyles(e,"shadow");return e}});L.AwesomeMarkers.icon=function(e){return new L.AwesomeMarkers.Icon(e)}})(this,document); 8 | -------------------------------------------------------------------------------- /css/leaflet.awesome-markers.css: -------------------------------------------------------------------------------- 1 | /* 2 | Author: L. Voogdt 3 | License: MIT 4 | Version: 1.0 5 | */ 6 | 7 | /* Marker setup */ 8 | .awesome-marker { 9 | background: url('images/markers-soft.png') no-repeat 0 0; 10 | width: 35px; 11 | height: 46px; 12 | position:absolute; 13 | left:0; 14 | top:0; 15 | display: block; 16 | text-align: center; 17 | } 18 | 19 | .awesome-marker-shadow { 20 | background: url('images/markers-shadow.png') no-repeat 0 0; 21 | width: 36px; 22 | height: 16px; 23 | } 24 | 25 | /* Retina displays */ 26 | @media (min--moz-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2), 27 | (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5),(min-resolution: 1.5dppx) { 28 | .awesome-marker { 29 | background-image: url('images/markers-soft@2x.png'); 30 | background-size: 720px 46px; 31 | } 32 | .awesome-marker-shadow { 33 | background-image: url('images/markers-shadow@2x.png'); 34 | background-size: 35px 16px; 35 | } 36 | } 37 | 38 | .awesome-marker i { 39 | color: #333; 40 | margin-top: 10px; 41 | display: inline-block; 42 | font-size: 14px; 43 | } 44 | 45 | .awesome-marker .icon-white { 46 | color: #fff; 47 | } 48 | 49 | /* Colors */ 50 | .awesome-marker-icon-red { 51 | background-position: 0 0; 52 | } 53 | 54 | .awesome-marker-icon-darkred { 55 | background-position: -180px 0; 56 | } 57 | 58 | .awesome-marker-icon-lightred { 59 | background-position: -360px 0; 60 | } 61 | 62 | .awesome-marker-icon-orange { 63 | background-position: -36px 0; 64 | } 65 | 66 | .awesome-marker-icon-beige { 67 | background-position: -396px 0; 68 | } 69 | 70 | .awesome-marker-icon-green { 71 | background-position: -72px 0; 72 | } 73 | 74 | .awesome-marker-icon-darkgreen { 75 | background-position: -252px 0; 76 | } 77 | 78 | .awesome-marker-icon-lightgreen { 79 | background-position: -432px 0; 80 | } 81 | 82 | .awesome-marker-icon-blue { 83 | background-position: -108px 0; 84 | } 85 | 86 | .awesome-marker-icon-darkblue { 87 | background-position: -216px 0; 88 | } 89 | 90 | .awesome-marker-icon-lightblue { 91 | background-position: -468px 0; 92 | } 93 | 94 | .awesome-marker-icon-purple { 95 | background-position: -144px 0; 96 | } 97 | 98 | .awesome-marker-icon-darkpurple { 99 | background-position: -288px 0; 100 | } 101 | 102 | .awesome-marker-icon-pink { 103 | background-position: -504px 0; 104 | } 105 | 106 | .awesome-marker-icon-cadetblue { 107 | background-position: -324px 0; 108 | } 109 | 110 | .awesome-marker-icon-white { 111 | background-position: -574px 0; 112 | } 113 | 114 | .awesome-marker-icon-gray { 115 | background-position: -648px 0; 116 | } 117 | 118 | .awesome-marker-icon-lightgray { 119 | background-position: -612px 0; 120 | } 121 | 122 | .awesome-marker-icon-black { 123 | background-position: -682px 0; 124 | } 125 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mapper App 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
Demand
28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
Supply
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 |
Contract
52 | 53 |
57 |
58 |
59 |
60 | 61 | 62 | 63 | 64 | 65 | 66 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | var leaflet_token = "pk.eyJ1IjoiZGFuaWVsYmFsYW4xOTg5IiwiYSI6ImNqazZrYmQxZjFhZ3ozdnFnYmtuNnB2MTkifQ.vRS1P1-6nA9VXmmTzFaqvw", 2 | google_map_token = "AIzaSyCqjjbTtBAknqTRgsCqUAoBte143u8ILPg", 3 | api_url = "http://localhost:8000", 4 | mymap, 5 | data = [], 6 | res = [], 7 | demand_flag = false, 8 | supply_flag = false; 9 | 10 | function geoCodeUrl(pin) { 11 | var url = `https://maps.googleapis.com/maps/api/geocode/json?address=${pin.address1.replace(/ /g, '+')},${pin.address2.replace(/ /g, '+')}&key=${google_map_token}`; 12 | return url; 13 | } 14 | 15 | function decodeUrl(address) { 16 | var post_code; 17 | for (var j = 0; j < address.length; j++) { 18 | if (address[j].types[0] == 'postal_code') post_code = address[j].long_name; 19 | } 20 | for (var i = 0; i < res.length; i++) { 21 | if (res[i].zip == post_code) return res[i]; 22 | } 23 | } 24 | 25 | function addEle(ele) { 26 | for (var i = 0; i < data.length; i++) { 27 | if (data[i].id == ele.id) { 28 | var dom = 29 | ` 30 | 31 | ID: 32 | ${data[i].id} 33 | 34 | 35 | Name: 36 | ${data[i].name} 37 | 38 | 39 | Address1: 40 | ${data[i].address1} 41 | 42 | 43 | Address2: 44 | ${data[i].address2} 45 | 46 | 47 | City: 48 | ${data[i].city} 49 | 50 | 51 | State: 52 | ${data[i].state} 53 | 54 | 55 | Zip: 56 | ${data[i].zip} 57 | 58 | 59 | Country: 60 | ${data[i].country} 61 | 62 | 63 | Color: 64 | ${data[i].color} 65 | 66 | 67 | Cargo: 68 | ${data[i].cargo} 69 | 70 | `; 71 | if (demand_flag == false) { 72 | $("#demand_table").append(dom); 73 | demand_flag = true; 74 | } else if (supply_flag == false) { 75 | $("#supply_table").append(dom); 76 | supply_flag = true; 77 | } 78 | if (supply_flag && demand_flag) { 79 | $(`#${ele.id}`).addClass("display-none"); 80 | } 81 | } 82 | } 83 | mymap.closePopup(); 84 | } 85 | 86 | function removeEle(ele, type) { 87 | var id = ele.id.replace(/_remove/g, ''); 88 | if (type == "supply") { 89 | $(`#supply_tbody`).remove(); 90 | supply_flag = false; 91 | } 92 | else { 93 | $(`#demand_tbody`).remove(); 94 | demand_flag = false; 95 | } 96 | } 97 | 98 | function create(ele) { 99 | $("#supply_tbody").remove(); 100 | $("#demand_tbody").remove(); 101 | $("#contract_text").val(''); 102 | supply_flag = false; 103 | demand_flag = false; 104 | } 105 | 106 | $(document).ready(function(){ 107 | mymap = L.map('mapid').setView([41.025758, -97.344704], 4); 108 | 109 | L.tileLayer(`https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=${leaflet_token}`, { 110 | attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', 111 | maxZoom: 5, 112 | id: 'mapbox.streets', 113 | accessToken: leaflet_token 114 | }).addTo(mymap); 115 | 116 | $.ajax({url: `${api_url}/address.json`, success: function(result){ 117 | res = result; 118 | for (var i = 0; i < res.length; i++) { 119 | data.push(res[i]); 120 | var geoUrl = geoCodeUrl(res[i]); 121 | $.ajax({url: geoUrl, success: function(result){ 122 | var address = result.results[0].address_components; 123 | var temp = decodeUrl(address); 124 | var lat = result.results[0].geometry.location.lat; 125 | var lng = result.results[0].geometry.location.lng; 126 | var markerColor = L.AwesomeMarkers.icon({ 127 | markerColor: temp.color 128 | }); 129 | var popup = `

${temp.name}

130 |

${temp.cargo}

131 | `; 132 | var marker = L.marker([lat, lng], {icon: markerColor}).addTo(mymap) 133 | .bindPopup(popup) 134 | .on('popupopen', function (e) { 135 | if (supply_flag && demand_flag) $(`#${temp.id}`).addClass("display-none"); 136 | }); 137 | }, 138 | fail: function(fail) { 139 | console.log('fail ====> ', fail); 140 | }}); 141 | } 142 | }, 143 | fail: function(fail) { 144 | console.log('fail ====> ', fail); 145 | }}); 146 | }); --------------------------------------------------------------------------------