Skip to content

Commit

Permalink
Merge pull request #11 from bomshteyn/master
Browse files Browse the repository at this point in the history 
Multiple Fixes: Default height, ability to change zoom and vue2-leaflet upgrade

Awesome - thanks again!
  • Loading branch information
@davidpiesse
davidpiesse authored Jan 27, 2019
2 parents 399d844 + bc450db commit f116ab2
Show file tree
Hide file tree
Showing 6 changed files with 1,710 additions and 25,854 deletions.
25,318 changes: 1 addition & 25,317 deletions dist/js/field.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@
},
"dependencies": {
"vue": "^2.5.0",
"vue2-leaflet": "^1.0.2"
"vue2-leaflet": "^1.2.0"
}
}
5 changes: 3 additions & 2 deletions resources/js/components/DetailField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,9 @@
</div>
<div class="w-3/4 py-4">
<div class="rounded flex flex-col" :style="'height: ' + field.height">
<map-detail
:type="field.spatialType"
<map-detail
:type="field.spatialType"
:zoom="field.zoom"
:value="field.value"
:latitude_field="field.latitude_field"
:longitude_field="field.longitude_field"
Expand Down
208 changes: 104 additions & 104 deletions resources/js/components/MapDetail.vue
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,127 @@
<template>
<l-map
class="w-full h-full rounded z-10"
ref="map"
:zoom="zoom"
:center="center"
:bounds="bounds"
:options="mapOptions"
<l-map
class="w-full h-full rounded z-10"
ref="map"
:zoom="zoom"
:center="center"
:bounds="bounds"
:options="mapOptions"
>
<l-tile-layer
v-for="tileProvider in tileProviders"
layerType="base"
:name="tileProvider.name"
:visible="tileProvider.visible"
:url="tileProvider.url"
:attribution="tileProvider.attribution"
:key="tileProvider.name"
/>
<l-tile-layer
v-for="tileProvider in tileProviders"
layerType="base"
:name="tileProvider.name"
:visible="tileProvider.visible"
:url="tileProvider.url"
:attribution="tileProvider.attribution"
:key="tileProvider.name"
/>

<l-geo-json
ref="geojsonLayer"
:geojson="geojson"
:options="options"
></l-geo-json>
<l-geo-json
ref="geojsonLayer"
:geojson="geojson"
:options="options"
></l-geo-json>

</l-map>
</template>

<script>
import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet'
import {LMap, LTileLayer, LGeoJson} from 'vue2-leaflet'
export default {
props: {
type: String,
value: {
default: null
export default {
props: {
type: String,
value: {
default: null
},
edit: {
type: Boolean,
default: false
},
latitude_field: String,
longitude_field: String,
geojson_field: String,
zoom: Number,
},
edit: {
type: Boolean,
default: false
components: {
LMap,
LTileLayer,
LGeoJson,
},
latitude_field: String,
longitude_field: String,
geojson_field: String,
},
components: {
LMap,
LTileLayer,
LGeoJson,
},
data() {
return {
map: null,
geojsonLayer: null,
center: [0, 0],
bounds: null,
zoom: 8,
tileProviders:[{
name: 'OpenStreetMap',
visible: true,
attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}],
options: {
style: function () {
return {
weight: 2,
color: 'blue',
opacity: 0.8,
fillColor: 'blue',
fillOpacity: 0.3
}
},
pointToLayer: function (feature, latlng) {
let base64img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII="
data() {
return {
map: null,
geojsonLayer: null,
center: [0, 0],
bounds: null,
tileProviders: [{
name: 'OpenStreetMap',
visible: true,
attribution: '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
}],
options: {
style: function () {
return {
weight: 2,
color: 'blue',
opacity: 0.8,
fillColor: 'blue',
fillOpacity: 0.3
}
},
pointToLayer: function (feature, latlng) {
let base64img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII="
let icon = L.icon({
iconUrl: base64img,
iconSize: [25, 41],
iconAnchor: [13, 40],
})
let icon = L.icon({
iconUrl: base64img,
iconSize: [25, 41],
iconAnchor: [13, 40],
})
return L.marker(latlng).setIcon(icon)
}
},
mapOptions: {
},
}
},
computed: {
geojson(){
if(this.type == "LatLon" || this.type == "LatLonField"){
return {
type: 'Point',
coordinates: [
this.value.lon,
this.value.lat,
]
return L.marker(latlng).setIcon(icon)
}
},
mapOptions: {},
}
},
computed: {
geojson() {
if (this.type == "LatLon" || this.type == "LatLonField") {
return {
type: 'Point',
coordinates: [
this.value.lon,
this.value.lat,
]
}
} else if (this.type == "GeoJSON") {
return JSON.parse(this.value)
} else {
return this.value
}
}else if(this.type == "GeoJSON"){
return JSON.parse(this.value)
}else{
return this.value
}
}
},
mounted() {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject
},
mounted() {
this.$nextTick(() => {
this.map = this.$refs.map.mapObject
this.geojsonLayer = this.$refs.geojsonLayer.mapObject
this.geojsonLayer = this.$refs.geojsonLayer.mapObject
this.setCenter()
})
this.setCenter()
})
},
methods: {
setCenter(){
if(this.geojson !== null){
this.map.fitBounds(L.geoJSON(this.geojson).getBounds(),{maxZoom:12})
}
},
methods: {
setCenter() {
if (this.geojson !== null) {
this.map.fitBounds(L.geoJSON(this.geojson).getBounds(), {maxZoom: 18}).setZoom(this.zoom)
}
},
}
}
}
</script>

<style scoped>
Expand Down
40 changes: 32 additions & 8 deletions src/Map.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,36 @@ class Map extends Field

public $showOnIndex = false;

public function height($height = '300px'){
return $this->withMeta([
'height' => $height
public $height = '300px';

public $zoom = 8;

public function __construct($name, $attribute = null, $resolveCallback = null)
{
parent::__construct($name, $attribute, $resolveCallback);

$this->withMeta([
'height' => $this->height,
'zoom' => $this->zoom,
]);
}

public function height($height){
if($height) {
return $this->withMeta([
'height' => $height
]);
}
}

public function zoom($zoom){
if($zoom) {
return $this->withMeta([
'zoom' => $zoom
]);
}
}

public function spatialType($type){
return $this->withMeta([
'spatialType' => $type
Expand All @@ -36,7 +60,7 @@ public function latitude($latitude_field){

public function longitude($longitude_field){
$this->attribute = null;

return $this->withMeta([
'longitude_field' => $longitude_field
]);
Expand All @@ -57,7 +81,7 @@ public function resolveAttribute($resource, $attribute = null){
'lat' => $resource->{$this->meta['latitude_field']},
'lon' => $resource->{$this->meta['longitude_field']},
];
break;
break;
case 'LatLonField':
$parts = collect(explode(',',$resource->{$attribute}))->map(function($item){
return trim($item);
Expand All @@ -67,13 +91,13 @@ public function resolveAttribute($resource, $attribute = null){
'lat' => $parts[0],
'lon' => $parts[1],
];
break;
break;
case 'GeoJSON':
return $resource->{$attribute};
break;
break;
default:
return $resource->{$attribute};
break;
break;
}
}

Expand Down
Loading

0 comments on commit f116ab2

Please sign in to comment.