Skip to content
This repository has been archived by the owner on Oct 17, 2022. It is now read-only.

Commit

Permalink
Merge pull request #20 from checkerschaf/master
Browse files Browse the repository at this point in the history 
Add option to render a circle with a radius on DetailField
  • Loading branch information
@mikebronner
mikebronner authored Sep 8, 2019
2 parents 94b5ee5 + bb00755 commit 6ffd574
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 87 deletions.
2 changes: 1 addition & 1 deletion dist/js/field.js
View file

Large diffs are not rendered by default.

186 changes: 100 additions & 86 deletions resources/js/components/DetailField.vue
View file
Original file line number Diff line number Diff line change
@@ -1,104 +1,113 @@
<script>
import { FormField, HandlesValidationErrors } from 'laravel-nova';
import L from "leaflet";
import { LMap, LTileLayer, LMarker, LIcon } from 'vue2-leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
export default {
components: {
LMap,
LMarker,
LTileLayer,
},
mixins: [FormField, HandlesValidationErrors],
props: ['resourceName', 'resourceId', 'field'],
data: function () {
return {
tileUrl: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
mapOptions: {
boxZoom: false,
doubleClickZoom: 'center',
dragging: false,
scrollWheelZoom: 'center',
touchZoom: 'center',
},
markerOptions: {
interactive: false,
},
};
},
created: function () {
if (this.field.tileProvider !== undefined) {
this.tileUrl = this.field.tileProvider;
}
},
computed: {
defaultZoom: function () {
return this.field.defaultZoom || 12;
import {FormField, HandlesValidationErrors} from 'laravel-nova';
import L from "leaflet";
import {LCircle, LMap, LMarker, LTileLayer} from 'vue2-leaflet';
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
export default {
components: {
LMap,
LMarker,
LTileLayer,
LCircle,
},
locationIsSet: function () {
if (this.value.latitude === undefined) {
this.setInitialValue();
}
return this.value.latitude > 0
|| this.value.longitude > 0;
mixins: [FormField, HandlesValidationErrors],
props: ['resourceName', 'resourceId', 'field'],
data: function () {
return {
tileUrl: 'https://{s}.tile.osm.org/{z}/{x}/{y}.png',
mapOptions: {
boxZoom: false,
doubleClickZoom: 'center',
dragging: false,
scrollWheelZoom: 'center',
touchZoom: 'center',
},
markerOptions: {
interactive: false,
},
};
},
locationIsNotSet: function () {
return ! this.locationIsSet;
created: function () {
if (this.field.tileProvider !== undefined) {
this.tileUrl = this.field.tileProvider;
}
},
mapCenter: function () {
if (this.value.latitude === undefined) {
this.setInitialValue();
}
computed: {
defaultZoom: function () {
return this.field.defaultZoom || 12;
},
return [
this.value.latitude,
this.value.longitude,
];
},
},
locationIsSet: function () {
if (this.value.latitude === undefined) {
this.setInitialValue();
}
methods: {
fill: function (formData) {
formData.append(this.field.latitude, this.value.latitude);
formData.append(this.field.longitude, this.value.longitude);
},
return this.value.latitude > 0
|| this.value.longitude > 0;
},
handleChange: function (value) {
this.value.latitude = value.latitude;
this.value.longitude = value.longitude;
},
locationIsNotSet: function () {
return !this.locationIsSet;
},
mapCenter: function () {
if (this.value.latitude === undefined) {
this.setInitialValue();
}
mapMoved: function (event) {
let coordinates = event.target.getCenter();
return [
this.value.latitude,
this.value.longitude,
];
},
radiusIsSet: function () {
return this.field.circleRadius !== undefined && this.field.circleRadius >= 0;
},
this.value.latitude = coordinates.lat;
this.value.longitude = coordinates.lng;
circleRadiusValue: function () {
return this.field.circleRadius || 0;
}
},
setInitialValue: function () {
this.value = {
latitude: this.field.value[this.field.latitude || "latitude"] || 0,
longitude: this.field.value[this.field.longitude || "longitude"] || 0,
};
methods: {
fill: function (formData) {
formData.append(this.field.latitude, this.value.latitude);
formData.append(this.field.longitude, this.value.longitude);
},
handleChange: function (value) {
this.value.latitude = value.latitude;
this.value.longitude = value.longitude;
},
mapMoved: function (event) {
let coordinates = event.target.getCenter();
this.value.latitude = coordinates.lat;
this.value.longitude = coordinates.lng;
},
setInitialValue: function () {
this.value = {
latitude: this.field.value[this.field.latitude || "latitude"] || 0,
longitude: this.field.value[this.field.longitude || "longitude"] || 0,
};
},
},
},
};
};
</script>

<template>
Expand All @@ -125,6 +134,11 @@ export default {
:options="markerOptions"
:lat-lng="mapCenter"
></l-marker>
<l-circle
v-if="radiusIsSet"
:lat-lng="mapCenter"
:radius="circleRadiusValue"
/>
</l-map>
</div>
</panel-item>
Expand Down
11 changes: 11 additions & 0 deletions src/MapMarker.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,17 @@ public function defaultZoom($field)
return $this->withMeta([__FUNCTION__ => $field]);
}

public function circleRadius($radius)
{
if (! is_array($this->attribute)) {
$this->attribute = [];
}

$this->attribute["circle_radius"] = $radius;

return $this->withMeta([__FUNCTION__ => $radius]);
}

// public function markerIcon(string $url)
// {
// return $this->withMeta([__FUNCTION__ => $url]);
Expand Down

0 comments on commit 6ffd574

Please sign in to comment.