consultoria-as/gonoware-laravel-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Emanuel Mutschlechner
2018-08-30 13:58:13 +02:00
parent 5247eb66bc
commit 206beb1655
24 changed files with 506 additions and 14353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md Normal file
View File

@@ -0,0 +1,7 @@
# Changelog
All notable changes will be documented in this file.
## 0.0.1 - 2018-08-30
- Initial beta release

126
README.md
View File

@@ -1,65 +1,119 @@
# Maps for your Laravel application
Publish assets to `public/vendor/maps/{css,js}` Using this package you can easily display maps on your website.
Supported map services:
* Google Maps
* OpenStreetMap
* Bing Maps
* MapQuest
* Yandex Maps
* MapKit (beta)
> Note: Yandex Maps API does not work in Chrome.
## Installation
This package can be installed through Composer.
```bash ```bash
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=maps composer require gonoware/laravel-maps
```
Laravel 5.5 uses Package Auto-Discovery, so doesn't require you to manually add
the ServiceProvider.
Publish the compiled assets to `public/vendor/maps` with one of these
commands:
```bash
php artisan vendor:publish --tag=maps
```
```bash
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=public
```
> When updating, use the `--force` switch to overwrite existing assets:
```bash
php artisan vendor:publish --tag=maps --force
``` ```
Publish config to `config/vendor/maps.php` Optionally, you can also publish the config file of this package with this
command to `config/vendor/maps.php`:
```bash ```bash
php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=config php artisan vendor:publish --provider="GoNoWare\Maps\MapsServiceProvider" --tag=config
``` ```
Add styles to `</head>`
## Usage
Load the map styles by adding the following directive to your
Blade template before the `</head>` closing tag.
```php ```php
@mapstyles @mapstyles
``` ```
Add scripts before `</body>` Then add the following directive to your Blade template
before the `</body>` closing tag, to load the map scripts.
```php ```php
@mapscripts @mapscripts
``` ```
Show map Display a map by adding the `@map` directive to your Blade template.
```php
@map([
'lat' => '51',
'lng' => '0',
'zoom' => '5',
])
```
Show map with one marker
```php
@map([
'lat' => '51',
'lng' => '0',
'zoom' => '5',
'markers' => [[
'lat' => '51',
'lng' => '0',
]],
])
```
Show map with two markers
```php ```php
@map([ @map([
'lat' => '48.134664', 'lat' => '48.134664',
'lng' => '11.555220', 'lng' => '11.555220',
'zoom' => '13', 'zoom' => '6'
'markers' => [[ ])
```
You can also show markers/pins/annotations:
```php
@map([
'lat' => '48.134664',
'lng' => '11.555220',
'zoom' => '6'
'markers' => [[
'title' => 'Go NoWare',
'lat' => '48.134664', 'lat' => '48.134664',
'lng' => '11.555220', 'lng' => '11.555220',
], [
'lat' => 11,
'lng' => 11,
]], ]],
]) ])
``` ```
Adjust map height Open a url when a marker is clicked
```php
@map([
'lat' => '48.134664',
'lng' => '11.555220',
'zoom' => '6'
'markers' => [[
'title' => 'Go NoWare',
'lat' => '48.134664',
'lng' => '11.555220',
'url' => 'https://gonoware.com',
]],
])
```
## Customization
To adjust the height of the map use CSS:
```css ```css
.map-container { .gnw-map-service {
height: 500px; height: 750px;
}
```
Change the background of the map container:
```css
.gnw-map-service__osm {
background: rgb(221, 221, 221);
}
```
Fade in by default when using Bootstrap 3.3.7 or 4+. To replicate or modify the animation use following CSS:
```css
.gnw-map.fade {
transition: opacity .15s linear;
}
.gnw-map.fade:not(.show) {
opacity: 0;
} }
``` ```

17
composer.json
View File

@@ -3,10 +3,19 @@
"description": "A Laravel 5 package to add Google Maps to your application", "description": "A Laravel 5 package to add Google Maps to your application",
"keywords": [ "keywords": [
"gonoware", "gonoware",
"google",
"maps",
"laravel", "laravel",
"tracking" "maps",
"osm",
"google",
"bing",
"yandex",
"mapquest",
"googlemaps",
"openstreetmap",
"bingmaps",
"yandexmaps",
"mapkit",
"mapkitjs"
], ],
"homepage": "https://gitlab.com/gonoware/laravel-maps", "homepage": "https://gitlab.com/gonoware/laravel-maps",
"support": { "support": {
@@ -56,7 +65,7 @@
"scripts": { "scripts": {
"build-script": [ "build-script": [
"yarn install", "yarn install",
"yarn run build" "yarn run prod"
], ],
"post-install-cmd": [ "post-install-cmd": [
"@build-script" "@build-script"

101
config/maps.php
View File

@@ -17,15 +17,81 @@ return [
/* /*
|---------------------------------------------------------------------- |----------------------------------------------------------------------
| Map Default | Default Map Service Name
|---------------------------------------------------------------------- |----------------------------------------------------------------------
| |
| TODO | Here you may specify which of the map services below you wish to use
| Available maps: 'google', 'osm', 'bing', 'mapkit' | as your default service for all displayed maps. Of course you may use many services at once using the Maps library.
| Available maps: 'google', 'osm', 'bing', 'mapquest', 'yandex', 'mapkit'
| |
*/ */
'default' => 'osm', 'default' => env('MAPS_SERVICE','yandex'),
/*
|--------------------------------------------------------------------------
| Map Services
|--------------------------------------------------------------------------
|
| Here are each of the map services setup for your application.
| Of course, examples of configuring each map api that is supported by
| Maps is shown below to make development simple.
|
|
| All proprietary map services require an API Key, so make sure you have
| the key for your particular service of choice defined in your .env
| before you begin development.
|
*/
'services' => [
'google' => [
// https://developers.google.com/maps/documentation/javascript/get-api-key
// https://developers.google.com/maps/documentation/embed/get-api-key
'key' => env('MAPS_GOOGLE_KEY', ''),
// https://developers.google.com/maps/documentation/javascript/maptypes
'type' => 'roadmap', // 'roadmap', 'satellite', 'hybrid', 'terrain',
],
'bing' => [
// https://msdn.microsoft.com/en-us/library/ff428642.aspx
// https://www.bingmapsportal.com
'key' => env('MAPS_BING_KEY', ''),
],
'osm' => [
'type' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
],
'yandex' => [
// https://developer.tech.yandex.com/keys
// limited free quota
'key' => env('MAPS_YANDEX_KEY', ''),
],
'mapquest' => [
// https://developer.mapquest.com/plan_purchase/steps/business_edition/business_edition_free/register
// https://developer.mapquest.com/user/me/apps
'key' => env('MAPS_MAPQUEST_KEY', ''),
// https://developer.mapquest.com/documentation/mapquest-js/v1.3/l-mapquest-tile-layer/
'type' => 'map', // 'map', 'hybrid', 'satellite', 'light', 'dark'
],
'mapkit' => [
// https://developer.apple.com/videos/play/wwdc2018/508
// https://developer.apple.com/documentation/mapkitjs/setting_up_mapkit_js?changes=latest_minor
'key' => env('MAPS_MAPKIT_KEY', ''),
// https://developer.apple.com/documentation/mapkitjs/mapkit/map/maptypes
'type' => 'standard', // 'standard', 'hybrid', 'satellite'
],
],
/* /*
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
@@ -33,35 +99,10 @@ return [
|-------------------------------------------------------------------------- |--------------------------------------------------------------------------
| |
| By default, Maps is enabled. You can set the value to false to disable | By default, Maps is enabled. You can set the value to false to disable
| rendering of the map. | rendering of all maps.
| |
*/ */
'enabled' => env('MAPS_ENABLED', true), 'enabled' => env('MAPS_ENABLED', true),
'maps' => [
'google' => [
// https://developers.google.com/maps/documentation/javascript/get-api-key
// https://developers.google.com/maps/documentation/embed/get-api-key
'key' => env('MAPS_GOOGLE_KEY'),
],
'bing' => [
// https://msdn.microsoft.com/en-us/library/ff428642.aspx
// https://www.bingmapsportal.com
'key' => env('MAPS_BING_KEY'),
],
'osm' => [
'tiles' => 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
],
'mapkit' => [
// https://developer.apple.com/videos/play/wwdc2018/508
'key' => env('MAPS_MAPKIT_KEY'),
],
],
]; ];

15
package.json
View File

@@ -1,11 +1,17 @@
{ {
"private": true, "private": true,
"scripts": { "scripts": {
"build": "rimraf public && cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" "dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"prod": "rimraf public && yarn run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}, },
"devDependencies": { "devDependencies": {
"cross-env": "^5.2.0", "cross-env": "^5.2.0",
"laravel-mix": "^2.1.11" "laravel-mix": "^2.1.14",
"leaflet-bing-layer": "^3.3.0"
}, },
"browserslist": [ "browserslist": [
"last 1 version", "last 1 version",
@@ -18,8 +24,5 @@
"Safari >= 9", "Safari >= 9",
"Android >= 4.4", "Android >= 4.4",
"Opera >= 30" "Opera >= 30"
], ]
"dependencies": {
"leaflet-bing-layer": "^3.3.0"
}
} }

2
public/css/index.css vendored
View File

@@ -1 +1 @@
.map-container{position:relative;height:300px}@media (min-width:992px){.map-container{height:450px}}.map-container.fade{opacity:0;transition:opacity 195ms ease-out}.map-container.fade.in{opacity:1;transition:opacity 225ms ease-in}.map-container>.map{height:inherit}.mk-map-view>.syrup-canvas{margin-left:-50%} .gnw-map-service{position:relative;height:400px}.gnw-map-service__google{background:#e5e3df}.gnw-map-service__bing,.gnw-map-service__mapquest,.gnw-map-service__osm{background:#ddd}.gnw-map-service__yandex{background:#f3f1ed}.gnw-map-service__mapkit{background:#f8f4ec}.gnw-map{height:inherit}.gnw-map .mk-map-view>.syrup-canvas{margin-left:-50%}

2
public/js/index.js vendored
View File

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View File

@@ -1,5 +1,5 @@
{ {
"/js/index.js": "/js/index.js?id=0c46454e9798f21c0806", "/js/index.js": "/js/index.js?id=fdadfceebf455b33ea99",
"/css/index.css": "/css/index.css?id=c9b47a0c3100d6dc46ed", "/css/index.css": "/css/index.css?id=81569dd7736e102f4342",
"/img/marker.png": "/img/marker.png?id=654ced713d12ed4ae55d" "/img/marker.png": "/img/marker.png?id=654ced713d12ed4ae55d"
} }

54
resources/js/index.js vendored
View File

@@ -1,41 +1,57 @@
import google from './types/google'; import google from './services/google';
import osm from './types/osm'; import osm from './services/osm';
import bing from './types/bing'; import bing from './services/bing';
import mapkit from './types/mapkit'; import mapquest from './services/mapquest';
import yandex from './services/yandex';
import mapkit from './services/mapkit';
import parser from './utils/parser'; import parser from './utils/parser';
import {isDefined} from './utils/helper'; import {isDefined, logError} from './utils/helper';
const createMap = (element, createMap, createMarker) => { const createMap = (element, createMap, createMarker) => {
if (!isDefined(element)) { if (!isDefined(element)) {
logError('element is undefined');
return; return;
} }
const mapData = parser.map(element); const mapData = parser.map(element);
const map = createMap(element, mapData); if (!isDefined(mapData)) {
logError('map data is undefined');
mapData.markers.forEach(markerData => {
if (!isDefined(map)) {
return; return;
} }
const map = createMap(element, mapData);
if (!isDefined(map)) {
logError('map is undefined');
return;
}
mapData.markers.forEach(markerData => {
createMarker(map, markerData); createMarker(map, markerData);
}) })
}; };
const createMapType = map => { const createMapService = service => {
const createMapType = element => createMap( const createMapService = element => createMap(
element, element,
map.createMap, service.createMap,
map.createMarker, service.createMarker,
); );
const selector = `[data-map-type="${map.type}"]`; const selector = `[data-map-${service.NAME}]`;
const elements = document.querySelectorAll(selector) || []; const elements = document.querySelectorAll(selector) || [];
elements.forEach(createMapType); elements.forEach(createMapService);
}; };
window.onGoogleMapsReady = () => createMapType(google); window.onGoogleMapsReady = () => createMapService(google);
(() => createMapType(osm))(); window.onYandexMapsReady = () => createMapService(yandex);
window.addEventListener('DOMContentLoaded', () => {
(() => createMapService(osm))();
(() => createMapService(bing))();
(() => createMapService(mapquest))();
(() => createMapService(mapkit))();
});
(() => createMapType(bing))();
(() => createMapType(mapkit))();

28
resources/js/types/bing.js → resources/js/services/bing.js vendored
View File

@@ -1,15 +1,16 @@
import {fadeElementIn, isDefined, openLink} from '../utils/helper'; import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
import 'leaflet-bing-layer'; import 'leaflet-bing-layer';
// TODO: locales/culture // TODO: locales/culture
export default { export default {
type: 'bing', NAME: 'bing',
createMap(element, mapData) { createMap(element, mapData) {
if (!isDefined(window.L)) { if (!isDefined(window.L)) {
logError('leaflet is undefined');
return; return;
} }
const {lat, lng, zoom, key} = mapData; const {lat, lng, zoom, service} = mapData;
const map = window.L const map = window.L
.map(element, {}) .map(element, {})
@@ -18,11 +19,9 @@ export default {
}) })
.setView([lat, lng], zoom); .setView([lat, lng], zoom);
console.log(key);
window.L.tileLayer window.L.tileLayer
.bing({ .bing({
bingMapsKey: key, bingMapsKey: service.key,
imagerySet: 'CanvasLight', imagerySet: 'CanvasLight',
}) })
.addTo(map); .addTo(map);
@@ -30,16 +29,21 @@ export default {
return map; return map;
}, },
createMarker(map, markerData) { createMarker(map, markerData) {
const {lat, lng, url} = markerData; const {title, lat, lng, url} = markerData;
const marker = window.L const marker = window.L.marker([lat, lng], {
.marker([lat, lng]) title,
.addTo(map); keyboard: false,
draggable: false,
});
if (url) { if (url) {
marker.addEventListener('click', () => { marker.on('click', event => {
openLink(url); event.originalEvent.preventDefault();
openUrl(url);
}); });
} }
marker.addTo(map);
}, },
} }

20
resources/js/types/google.js → resources/js/services/google.js vendored
View File

@@ -1,21 +1,23 @@
import {fadeElementIn, isDefined, openLink} from '../utils/helper'; import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
export default { export default {
type: 'google', NAME: 'google',
createMap(element, mapData) { createMap(element, mapData) {
if (!isDefined(window.google)) { if (!isDefined(window.google)) {
logError('google is undefined');
return; return;
} }
if (!isDefined(window.google.maps)) { if (!isDefined(window.google.maps)) {
logError('google maps is undefined');
return; return;
} }
const {lat, lng, zoom} = mapData; const {lat, lng, zoom, service} = mapData;
const map = new window.google.maps.Map(element, { const map = new window.google.maps.Map(element, {
center: new window.google.maps.LatLng(lat, lng), center: new window.google.maps.LatLng(lat, lng),
zoom: zoom, zoom,
mapTypeId: window.google.maps.MapTypeId.ROADMAP, mapTypeId: service.type || window.google.maps.MapTypeId.ROADMAP,
}); });
window.google.maps.event.addListenerOnce(map, 'idle', () => { window.google.maps.event.addListenerOnce(map, 'idle', () => {
@@ -25,12 +27,12 @@ export default {
return map; return map;
}, },
createMarker(map, markerData) { createMarker(map, markerData) {
const {lat, lng, url} = markerData; const {title, lat, lng, url} = markerData;
const marker = new window.google.maps.Marker({ const marker = new window.google.maps.Marker({
position: new window.google.maps.LatLng(lat, lng), position: new window.google.maps.LatLng(lat, lng),
map: map, map,
title: 'Test Title', // TODO title,
draggable: false, draggable: false,
// icon: { // icon: {
// url: markerConfig.mapMarkerImg, // url: markerConfig.mapMarkerImg,
@@ -39,7 +41,7 @@ export default {
if (url) { if (url) {
marker.addListener('click', () => { marker.addListener('click', () => {
openLink(url); openUrl(url);
}); });
} }
}, },

17
resources/js/types/mapkit.js → resources/js/services/mapkit.js vendored
View File

@@ -1,12 +1,13 @@
import {fadeElementIn, isDefined} from '../utils/helper'; import {fadeElementIn, isDefined, logError} from '../utils/helper';
export default { export default {
type: 'mapkit', NAME: 'mapkit',
createMap(element, mapData) { createMap(element, mapData) {
if (!isDefined(window.mapkit)) { if (!isDefined(window.mapkit)) {
logError('mapkit is undefined');
return; return;
} }
const {lat, lng, zoom, key} = mapData; const {lat, lng, zoom, service} = mapData;
window.mapkit.init({ window.mapkit.init({
authorizationCallback(done) { authorizationCallback(done) {
@@ -18,7 +19,7 @@ export default {
}); });
xhr.send(); xhr.send();
*/ */
done(key); done(service.key);
}, },
}); });
window.mapkit.addEventListener('configuration-change', event => { window.mapkit.addEventListener('configuration-change', event => {
@@ -27,7 +28,9 @@ export default {
} }
}); });
const map = new window.mapkit.Map(element); const map = new window.mapkit.Map(element, {
mapType: service.type || window.mapkit.Map.MapTypes.Standard,
});
const delta = Math.exp(Math.log(360) - (zoom * Math.LN2)); // TODO: zoom to delta not working const delta = Math.exp(Math.log(360) - (zoom * Math.LN2)); // TODO: zoom to delta not working
map.region = new window.mapkit.CoordinateRegion( map.region = new window.mapkit.CoordinateRegion(
@@ -38,11 +41,11 @@ export default {
return map; return map;
}, },
createMarker(map, markerData) { createMarker(map, markerData) {
const {lat, lng, url} = markerData; const {title, lat, lng, url} = markerData;
const coordinate = new window.mapkit.Coordinate(lat, lng); const coordinate = new window.mapkit.Coordinate(lat, lng);
const marker = new window.mapkit.MarkerAnnotation(coordinate, { const marker = new window.mapkit.MarkerAnnotation(coordinate, {
title: 'Test title', title,
}); });
map.showItems([marker]); // TODO: map auto resize bugging if multiple markers map.showItems([marker]); // TODO: map auto resize bugging if multiple markers

55
resources/js/services/mapquest.js vendored Normal file
View File

@@ -0,0 +1,55 @@
import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
// TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
// TODO add config for different styles like database connections: https://wiki.openstreetmap.org/wiki/Tile_servers
// http://leaflet-extras.github.io/leaflet-providers/preview/
// TODO custom icons: https://leafletjs.com/examples/custom-icons/
export default {
NAME: 'mapquest',
createMap(element, mapData) {
if (!isDefined(window.L)) {
logError('leaflet is undefined');
return;
}
if (!isDefined(window.L.mapquest)) {
logError('mapquest is undefined');
return
}
const {lat, lng, zoom, service} = mapData;
window.L.mapquest.key = service.key;
const map = window.L.mapquest
.map(element, {
center: [lat, lng],
zoom,
layers: window.L.mapquest.tileLayer(service.type || 'map'),
})
.on('load', () => {
fadeElementIn(element);
})
.setView([lat, lng], zoom);
return map;
},
createMarker(map, markerData) {
const {title, lat, lng, url} = markerData;
const marker = window.L.marker([lat, lng], {
title,
keyboard: false,
draggable: false,
});
if (url) {
marker.on('click', event => {
event.originalEvent.preventDefault();
openUrl(url);
});
}
marker.addTo(map);
},
}

26
resources/js/types/osm.js → resources/js/services/osm.js vendored
View File

@@ -1,4 +1,4 @@
import {fadeElementIn, isDefined, openLink} from '../utils/helper'; import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
// TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/ // TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
@@ -8,12 +8,13 @@ import {fadeElementIn, isDefined, openLink} from '../utils/helper';
// TODO custom icons: https://leafletjs.com/examples/custom-icons/ // TODO custom icons: https://leafletjs.com/examples/custom-icons/
export default { export default {
type: 'osm', NAME: 'osm',
createMap(element, mapData) { createMap(element, mapData) {
if (!isDefined(window.L)) { if (!isDefined(window.L)) {
logError('leaflet is undefined');
return; return;
} }
const {lat, lng, zoom} = mapData; const {lat, lng, zoom, service} = mapData;
const map = window.L const map = window.L
.map(element, {}) .map(element, {})
@@ -23,7 +24,7 @@ export default {
.setView([lat, lng], zoom); .setView([lat, lng], zoom);
window.L window.L
.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { .tileLayer(service.type || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}) })
.addTo(map); .addTo(map);
@@ -31,16 +32,21 @@ export default {
return map; return map;
}, },
createMarker(map, markerData) { createMarker(map, markerData) {
const {lat, lng, url} = markerData; const {title, lat, lng, url} = markerData;
const marker = window.L const marker = window.L.marker([lat, lng], {
.marker([lat, lng]) title,
.addTo(map); keyboard: false,
draggable: false,
});
if (url) { if (url) {
marker.addEventListener('click', () => { marker.on('click', event => {
openLink(url); event.originalEvent.preventDefault();
openUrl(url);
}); });
} }
marker.addTo(map);
}, },
} }

38
resources/js/services/yandex.js vendored Normal file
View File

@@ -0,0 +1,38 @@
import {isDefined, logError} from '../utils/helper';
export default {
NAME: 'yandex',
createMap(element, mapData) {
if (!isDefined(window.ymaps)) {
logError('ymaps is undefined');
return;
}
const {lat, lng, zoom} = mapData;
const map = new window.ymaps.Map(element, {
center: [lat, lng],
zoom,
});
// window.google.maps.event.addListenerOnce(map, 'idle', () => {
// fadeElementIn(element);
// });
return map;
},
createMarker(map, markerData) {
const {title, lat, lng, url} = markerData;
const marker = new window.ymaps.Placemark([lat, lng], {
hintContent: title,
});
// if (url) {
// marker.addListener('click', () => {
// openUrl(url);
// });
// }
map.geoObjects.add(marker);
},
};

14109
resources/js/types/asd.js vendored
View File

File diff suppressed because one or more lines are too long

10
resources/js/utils/helper.js vendored
View File

@@ -1,5 +1,11 @@
export const isDefined = object => typeof object !== 'undefined'; export const isDefined = object => typeof object !== 'undefined';
export const fadeElementIn = element => element.closest('.fade').classList.add('in'); export const fadeElementIn = element => {
const target = element.closest('.fade');
target.classList.add('show'); // Bootstrap 4
target.classList.add('in'); // Backwards compatibility Bootstrap 3.3.7
};
export const openLink = url => window.open(url, '_blank'); export const openUrl = url => window.open(url, '_blank');
export const logError = error => isDefined(console) && console.error('[laravel-maps] error:', error);

50
resources/js/utils/parser.js vendored
View File

@@ -1,29 +1,57 @@
const parseMarker = marker => { import {logError} from "./helper";
const lat = parseFloat(marker.lat);
const lng = parseFloat(marker.lng); const parseMap = element => JSON.parse(
const url = marker.url; element.dataset.mapGoogle
|| element.dataset.mapOsm
|| element.dataset.mapBing
|| element.dataset.mapMapquest
|| element.dataset.mapYandex
|| element.dataset.mapMapkit
);
const parseService = element => {
const {key, type} = JSON.parse(element.dataset.mapService);
return { return {
key,
type,
}
};
const parseMarkers = element => {
const markers = JSON.parse(element.dataset.mapMarkers) || [];
return markers.map(marker => {
const lat = parseFloat(marker.lat);
const lng = parseFloat(marker.lng);
const {title, url} = marker;
return {
title,
lat, lat,
lng, lng,
url, url,
}; };
});
}; };
export default { export default {
map(element) { map(element) {
const lat = parseFloat(element.dataset.mapLat); try {
const lng = parseFloat(element.dataset.mapLng); const map = parseMap(element);
const zoom = parseInt(element.dataset.mapZoom); const lat = parseFloat(map.lat);
const key = element.dataset.mapKey; const lng = parseFloat(map.lng);
const markers = (JSON.parse(element.dataset.mapMarkers) || []).map(parseMarker); const zoom = parseInt(map.zoom);
const service = parseService(element);
const markers = parseMarkers(element);
return { return {
lat, lat,
lng, lng,
zoom, zoom,
key, service,
markers, markers,
}; };
} catch (e) {
logError(e);
}
}, },
} }

31
resources/sass/index.scss vendored
View File

@@ -1,23 +1,25 @@
.map-container { .gnw-map-service {
position: relative; position: relative;
height: 300px; height: 400px;
@media (min-width: 992px) {
height: 450px;
}
&.fade { &__google {
opacity: 0; background: rgb(229, 227, 223);
transition: opacity 195ms ease-out; }
&.in { &__osm,
opacity: 1; &__bing,
transition: opacity 225ms ease-in; &__mapquest {
background: rgb(221, 221, 221);
}
&__yandex {
background: rgb(243, 241, 237);
}
&__mapkit {
background: rgb(248, 244, 236);
} }
} }
> .map { .gnw-map {
height: inherit; height: inherit;
}
}
// Fix Mapkit canvas // Fix Mapkit canvas
.mk-map-view { .mk-map-view {
@@ -25,3 +27,4 @@
margin-left: -50%; margin-left: -50%;
} }
} }
}

4
resources/views/index.blade.php
View File

@@ -1,6 +1,6 @@
@if ($enabled) @if ($enabled)
<div class="map-container fade"> <div class="gnw-map-service gnw-map-service__{{ $service }}">
<div class="map" data-map-key="{{ $key }}" data-map-type="{{ $type }}" data-map-lat="{{ $lat }}" data-map-lng="{{ $lng }}" data-map-zoom="{{ $zoom }}" data-map-markers="{{ json_encode($markers) }}"></div> <div class="gnw-map fade" data-map-{{ $service }}="{{ json_encode(compact('lat', 'lng', 'zoom')) }}" data-map-service="{{ json_encode(config('vendor.maps.services.'.$service)) }}" data-map-markers="{{ json_encode($markers ?? []) }}"></div>
</div> </div>
{{-- {{--
<div class="col-lg-12"></div> <div class="col-lg-12"></div>

28
resources/views/scripts.blade.php
View File

@@ -1,16 +1,24 @@
@if ($enabled) @if ($enabled)
{{--TODO: If overriding type via @map() then type is not working--}} {{--TODO: If overriding service via @map() then service is not working--}}
@if ($type == 'osm' || $type == 'bing') @if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin="" type="text/javascript"></script>
integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
crossorigin="" async defer></script>
{{-- TODO check if bing needs polyfill: https://github.com/digidem/leaflet-bing-layer--}} {{-- TODO check if bing needs polyfill: https://github.com/digidem/leaflet-bing-layer--}}
@endif @endif
@if ($type == 'mapkit')
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" async defer></script>
@endif
<script src="{{ asset(mix('js/index.js', 'vendor/maps')) }}" type="text/javascript"></script> <script src="{{ asset(mix('js/index.js', 'vendor/maps')) }}" type="text/javascript"></script>
@if($type == 'google') @if ($service == 'mapkit')
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&ie=UTF8&oe=UTF8&key={{ $key }}&language={{ app()->getLocale() }}&callback=onGoogleMapsReady" async defer></script> <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" type="text/javascript"></script>
@endif
@if ($service == 'mapquest')
<script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.js" type="text/javascript"></script>
@endif
@if ($service == 'yandex')
@if (!empty($key = config('vendor.maps.services.yandex.key')))
<script src="https://enterprise.api-maps.yandex.ru/2.1/?lang=en_US&apikey={{ $key }}&onload=onYandexMapsReady" type="text/javascript" async defer></script>
@else
<script src="https://api-maps.yandex.ru/2.1/?lang=en_US&onload=onYandexMapsReady" type="text/javascript" async defer></script>
@endif
@endif
@if ($service == 'google')
<script src="https://maps-api-ssl.google.com/maps/api/js?v=3&ie=UTF8&oe=UTF8&key={{ config('vendor.maps.services.google.key') }}&language={{ app()->getLocale() }}&callback=onGoogleMapsReady" type="text/javascript" async defer></script>
@endif @endif
@endif @endif

9
resources/views/styles.blade.php
View File

@@ -1,8 +1,9 @@
@if ($enabled) @if ($enabled)
@if($type == 'osm' || $type == 'bing') @if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" type="text/css">
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" @endif
crossorigin=""/> @if ($service == 'mapquest')
<link rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.css" type="text/css">
@endif @endif
<link rel="stylesheet" href="{{ asset(mix('css/index.css', 'vendor/maps')) }}" type="text/css"> <link rel="stylesheet" href="{{ asset(mix('css/index.css', 'vendor/maps')) }}" type="text/css">
@endif @endif

32
src/MapsServiceProvider.php
View File

@@ -18,31 +18,13 @@ class MapsServiceProvider extends BaseServiceProvider
$this->loadViewsFrom(__DIR__.'/../resources/views', 'maps'); $this->loadViewsFrom(__DIR__.'/../resources/views', 'maps');
view()->composer('maps::*', function ($view) { view()->composer('maps::*', function ($view) {
$type = $view->type ?? config('vendor.maps.default'); if (!isset($view->service)) {
$enabled = $view->enabled ?? config('vendor.maps.enabled'); $view->with('service', config('vendor.maps.default'));
$key = config('vendor.maps.maps.'.$type.'.key'); }
if (!isset($view->enabled)) {
// TODO: Warn missing key? $view->with('enabled', config('vendor.maps.enabled'));
}
return $view->with(compact( return $view;
'type',
'enabled',
'key'
));
});
view()->composer('maps::index', function ($view) {
$lat = $view->lat ?? config('vendor.maps.lat');
$lng = $view->lng ?? config('vendor.maps.lng');
$zoom = $view->zoom ?? config('vendor.maps.zoom');
$markers = $view->markers ?? config('vendor.maps.markers');
return $view->with(compact(
'lat',
'lng',
'zoom',
'markers'
));
}); });
} }

42
yarn.lock
View File

@@ -37,7 +37,7 @@ acorn@^5.0.0, acorn@^5.2.1:
adjust-sourcemap-loader@^1.1.0: adjust-sourcemap-loader@^1.1.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.2.0.tgz#e33fde95e50db9f2a802e3647e311d2fc5000c69" resolved "http://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.2.0.tgz#e33fde95e50db9f2a802e3647e311d2fc5000c69"
dependencies: dependencies:
assert "^1.3.0" assert "^1.3.0"
camelcase "^1.2.1" camelcase "^1.2.1"
@@ -446,15 +446,15 @@ babel-plugin-check-es2015-constants@^6.22.0:
babel-plugin-syntax-async-functions@^6.8.0: babel-plugin-syntax-async-functions@^6.8.0:
version "6.13.0" version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95" resolved "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
babel-plugin-syntax-exponentiation-operator@^6.8.0: babel-plugin-syntax-exponentiation-operator@^6.8.0:
version "6.13.0" version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de" resolved "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
babel-plugin-syntax-object-rest-spread@^6.8.0: babel-plugin-syntax-object-rest-spread@^6.8.0:
version "6.13.0" version "6.13.0"
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5" resolved "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
babel-plugin-syntax-trailing-function-commas@^6.22.0: babel-plugin-syntax-trailing-function-commas@^6.22.0:
version "6.22.0" version "6.22.0"
@@ -1075,12 +1075,12 @@ caniuse-api@^1.5.2:
lodash.uniq "^4.5.0" lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
version "1.0.30000878" version "1.0.30000882"
resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000878.tgz#0d0c6d8500c3aea21441fad059bce4b8f3f509df" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000882.tgz#d9d50e5189be253ffb31d347cd7f3c615b602f7f"
caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844: caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000844:
version "1.0.30000878" version "1.0.30000882"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000878.tgz#c644c39588dd42d3498e952234c372e5a40a4123" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000882.tgz#0d5066847a11a5af0e50ffce6c062ef0665f68ea"
caseless@~0.12.0: caseless@~0.12.0:
version "0.12.0" version "0.12.0"
@@ -1095,7 +1095,7 @@ center-align@^0.1.1:
chalk@^1.1.1, chalk@^1.1.3: chalk@^1.1.1, chalk@^1.1.3:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" resolved "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
dependencies: dependencies:
ansi-styles "^2.2.1" ansi-styles "^2.2.1"
escape-string-regexp "^1.0.2" escape-string-regexp "^1.0.2"
@@ -1217,16 +1217,12 @@ collection-visit@^1.0.0:
object-visit "^1.0.0" object-visit "^1.0.0"
color-convert@^1.3.0, color-convert@^1.9.0: color-convert@^1.3.0, color-convert@^1.9.0:
version "1.9.2" version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.2.tgz#49881b8fba67df12a96bdf3f56c0aab9e7913147" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
dependencies: dependencies:
color-name "1.1.1" color-name "1.1.3"
color-name@1.1.1: color-name@1.1.3, color-name@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
color-name@^1.0.0:
version "1.1.3" version "1.1.3"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
@@ -1798,8 +1794,8 @@ ee-first@1.1.1:
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47: electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30, electron-to-chromium@^1.3.47:
version "1.3.61" version "1.3.62"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.61.tgz#a8ac295b28d0f03d85e37326fd16b6b6b17a1795" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.62.tgz#2e8e2dc070c800ec8ce23ff9dfcceb585d6f9ed8"
elliptic@^6.0.0: elliptic@^6.0.0:
version "6.4.1" version "6.4.1"
@@ -3691,7 +3687,7 @@ mixin-object@^2.0.1:
mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1: mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
version "0.5.1" version "0.5.1"
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903" resolved "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
dependencies: dependencies:
minimist "0.0.8" minimist "0.0.8"
@@ -4976,7 +4972,7 @@ resolve-from@^3.0.0:
resolve-url-loader@^2.2.1: resolve-url-loader@^2.2.1:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-2.3.0.tgz#e1b37034d48f22f8cfb9f04c026faaa070fdaf26" resolved "http://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-2.3.0.tgz#e1b37034d48f22f8cfb9f04c026faaa070fdaf26"
dependencies: dependencies:
adjust-sourcemap-loader "^1.1.0" adjust-sourcemap-loader "^1.1.0"
camelcase "^4.1.0" camelcase "^4.1.0"
@@ -6036,8 +6032,8 @@ webpack-notifier@^1.5.1:
strip-ansi "^3.0.1" strip-ansi "^3.0.1"
webpack-sources@^1.0.1, webpack-sources@^1.1.0: webpack-sources@^1.0.1, webpack-sources@^1.1.0:
version "1.1.0" version "1.2.0"
resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.2.0.tgz#18181e0d013fce096faf6f8e6d41eeffffdceac2"
dependencies: dependencies:
source-list-map "^2.0.0" source-list-map "^2.0.0"
source-map "~0.6.1" source-map "~0.6.1"