Related
I have two sets of points coordinates that I need to connect on google map, like this, just much larger:
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
The first coordinate from "start" needs to be connected to the first coord from "end", and so on, until the end. Got that, but now I need to make "start" and "end" points more recognizable, put some kind of dots in a different color on them. What I have:
var geocoder;
var map;
function initialize() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);
Any kind of help is welcomed.
The simplest thing you can just create markers for start and end points. Like the following code
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
It will give you something like
Code snippet
var map;
function initMap() {
var center = new google.maps.LatLng(51.97559, 4.12565);
map = new google.maps.Map(document.getElementById('map'), {
center: center,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
var start = ['42.81405, 12.4886861111', '32.7994444444, 20.506775', '44.8062644989, 20.5005495758'];
var end = ['47.81405, 18.4886861111', '33.7994444444, 21.506775', '39.8062644989, 16.5005495758'];
var paths = [];
for (var i=0; i < end.length; i++){
var startCoords = start[i].split(",");
var startPt = new google.maps.LatLng(startCoords[0],startCoords[1]);
var endCoords = end[i].split(",");
var endPt = new google.maps.LatLng(endCoords[0],endCoords[1]);
paths.push([startPt, endPt]);
bounds.extend(startPt);
bounds.extend(endPt);
//Create start and end markers
var markerStart = new google.maps.Marker({
position: startPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'blue',
strokeColor: 'blue'
},
draggable: true,
map: map
});
var markerEnd = new google.maps.Marker({
position: endPt,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 3,
fillColor: 'green',
strokeColor: 'green'
},
draggable: true,
map: map
});
}
map.fitBounds(bounds);
var polyline = new google.maps.Polygon({
paths: paths,
strokeColor: 'red',
strokeWeight: 2,
strokeOpacity: 1
});
polyline.setMap(map);
}
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
async defer></script>
I have been searching everywhere for something similar, but can not find anything to help. I have searched the Google Maps API for Javscript for any sort of help, however I couldn't work it out.
I am looking to simply rotate the marker by +5 degrees per click, but cant seem to figure it out. I am looking to do the same by changing the fillColor, however Im sure I could figure it out if rotation isnt too different.
JAVASCRIPT:
function addMarkerUpstream() {
var upstreamIcon = {
path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
fillColor: '#fbb040',
fillOpacity: 1,
scale: 1.5,
strokeColor: '#000',
strokeWeight: 0.5,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15, 50),
rotation: 0,
}
var marker = new google.maps.Marker({
position: map.center,
map: map,
title: 'Upstream',
draggable: true,
icon: upstreamIcon
});
latLang = marker.getPosition();
marker.setMap(map);
//ROTATION
$("#rotate").click(function() {
upstreamIcon.setProperty({rotation:+5});
});
//FILL COLOR
$("#fill_red").click(function() {
upstreamIcon = { fillColor: 'red'}
});
};
EDIT:
HERE is a jsFiddle of all the code in my project.
Try this:
$("#rotate").click(function() {
var icon = marker.getIcon();
var rotation = icon.rotation;
rotation += 5;
icon.rotation = rotation;
marker.setIcon(icon);
});
Try like this,
function addMarkerUpstream() {
var rotate = 0;
var upstreamIcon = {
path: 'M28.6,17.5L16.1,4.9l0,0 c-0.1-0.1-0.2-0.2-0.3-0.2c0,0-0.1,0-0.1-0.1c-0.1,0-0.1-0.1-0.2-0.1c-0.1,0-0.1,0-0.2-0.1c0,0-0.1,0-0.1,0c-0.1,0-0.2,0-0.3,0 c0,0,0,0,0,0l0,0c-0.1,0-0.2,0-0.3,0c-0.1,0-0.1,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c-0.1,0-0.1,0.1-0.2,0.1c0,0-0.1,0-0.1,0.1 c-0.1,0.1-0.2,0.1-0.3,0.2c0,0,0,0,0,0l0,0c0,0,0,0,0,0L1,17.5l0,0c-0.7,0.7-0.7,1.8,0,2.5s1.8,0.7,2.5,0l9.6-9.6 c0,6.7,0,34.2,0,34.2c0,1,0.8,1.7,1.7,1.7s1.7-0.8,1.7-1.7V10.4l9.6,9.6c0.7,0.7,1.8,0.7,2.5,0S29.3,18.2,28.6,17.5z',
fillColor: '#fbb040',
fillOpacity: 1,
scale: 1.5,
strokeColor: '#000',
strokeWeight: 0.5,
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(15, 50),
rotation: rotate,
}
var marker = new google.maps.Marker({
position: map.center,
map: map,
title: 'Upstream',
draggable: true,
icon: upstreamIcon
});
latLang = marker.getPosition();
marker.setMap(map);
//ROTATION
$("#rotate").click(function() {
rotate = rotate + 5;
upstreamIcon.{ rotation: rotate }; // Try like this
});
//FILL COLOR
$("#fill_red").click(function() {
upstreamIcon = { fillColor: 'red'}
});
I'm making a Google Maps application which has a video camera icon representing the street view and another icon representing any position.
See the Fiddle:
http://jsfiddle.net/uepc2f8n/52/
If I uncomment this "//google.maps.SymbolPath.FORWARD_CLOSED_ARROW", works fine! But when I put the camera path, the position does not get in the right position.
I don't know much about SVG Path, it's complex!
How do I point the lens of the camera in the direction of my marker?
code snippet (from linked fiddle):
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z", //google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 2,
rotation: heading
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
}
initialize();
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<div id="map-canvas"></div>
You need to set the anchor and the rotation of the SVG Symbol correctly for your particular symbol. Looks to me like you want an anchor of (3,-10) and a rotation of heading - 90 degrees.
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
updated fiddle
code snippet:
function initialize() {
var direction = new google.maps.LatLng(52.376423, 4.887234);
var station = new google.maps.LatLng(52.155401, 5.118824);
var mapProperties = {
center: direction,
zoom: 10
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapProperties);
var directionMarker = new google.maps.Marker({
position: direction,
map: map,
draggable: true,
title: "test"
});
var heading = google.maps.geometry.spherical.computeHeading(direction, station);
directionMarker.setIcon({
path: "M17 -5.5V-15c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",
scale: 2,
anchor: new google.maps.Point(3, -10),
rotation: heading - 90
});
var stationMarker = new google.maps.Marker({
position: station,
map: map,
});
var polyline = new google.maps.Polyline({
path: [direction, station],
geodesic: true,
strokeColor: "#ff0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
var bounds = new google.maps.LatLngBounds();
bounds.extend(station);
bounds.extend(direction);
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map-canvas"></div>
I've been playing with Google Map API for a few days now and it's pretty straight forward for the most part, but one thing that we need to do, I can't figure out. I've played with the labels as you can see in the example below, but I'm unable to give them to look that I have in the image below. Can someone point me to a reference so I can achieve my requirements?
If your looking for the makerwithlable.js, you can get it from here.. Its where I got it:
https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=288
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="markerwithlabel.js" type="text/javascript"></script>
<script>
{
var showOnStartInfoWindows = true;
//create locations..
var arrayAll = [];
var marker = [];
var jax = new google.maps.LatLng(30.318028, -81.674474);
var leesburg = new google.maps.LatLng(28.810750, -81.880056);
var map = null;
arrayAll[0] = {loc: jax, size: 5000, info: "Jacksonville, FL 32204"};
arrayAll[1] = {loc: leesburg, size: 1000, info: "Leesburg, FL"};
//EO create locations..
}
function initialize()
{
//center the map on Jacksonville
var mapProp = {
center:arrayAll[0].loc,
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//set google's API and pass the DIV by ID.
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var bounds = new google.maps.LatLngBounds(leesburg, jax);
map.fitBounds(bounds);
var maxSize = 0;
for(var i = 0; i < arrayAll.length; i++)
{
if(maxSize<arrayAll[i].size)
maxSize = arrayAll[i].size;
}
for(var i = 0; i < arrayAll.length; i++)
{
var size = Math.round((arrayAll[i].size/maxSize)*100);
//create marker
marker[i] = new google.maps.Marker({
position:arrayAll[i].loc,
map: map,
title: 'Right-Click to zoom all the way in.\nLeft-Click to zoom to a state level.',
draggable: false,
raiseOnDrag: false,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "googleLabel", // the CSS class for the label
labelContent: arrayAll[i].info,
icon: {
path: google.maps.SymbolPath.CIRCLE, //BACKWARD_CLOSED_ARROW
fillOpacity: 0.3,
fillColor: '#0000ff',
strokeOpacity: 1.0,
strokeColor: '#0000ff',
strokeWeight: 1.0,
scale: size, //pixels
}
});
marker[i].setMap(map);
//EO create marker
marker_onclick(marker[i]);
marker_info(marker[i]);
}
}
function marker_onclick(marker) {
google.maps.event.addListener(marker, 'dblclick', function(o) {
map.setZoom(18);
map.setCenter(marker.position);
});
google.maps.event.addListener(marker, 'click', function(o) {
map.setZoom(7);
map.setCenter(marker.position);
});
google.maps.event.addListener(marker, 'rightclick', function(o) {
alert('Could route to different URL:\n' + marker.position);
});
}
function marker_info(marker) {
//create popup notice..
var infowindow = new google.maps.InfoWindow({
content:marker.labelContent
});
if(showOnStartInfoWindows)
infowindow.open(map, marker);
google.maps.event.addListener(marker, 'mouseover', function (o) {
//alert('over');
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function (o) {
//alert('out');
infowindow.close(map, marker);
});
//EO create popup notice..
}
{
google.maps.event.addDomListener(window, 'load', initialize);
}
</script>
</head>
<body>
<div id="googleMap" style="width:640px;height:640px;"></div>
</body>
</html>
Example of what I'm trying to do.
Based on the value of size you may set the style(fontSize,width,height etc.) and the labelAnchor
{
var showOnStartInfoWindows = true;
//create locations..
var arrayAll = [];
var marker = [];
var jax = new google.maps.LatLng(30.318028, -81.674474);
var leesburg = new google.maps.LatLng(28.810750, -81.880056);
var map = null;
arrayAll[0] = {
loc: jax,
size: 5000,
info: "Jacksonville, FL 32204"
};
arrayAll[1] = {
loc: leesburg,
size: 1000,
info: "Leesburg, FL"
};
//EO create locations..
}
function initialize() {
//center the map on Jacksonville
var mapProp = {
center: arrayAll[0].loc,
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//set google's API and pass the DIV by ID.
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds(leesburg, jax);
map.fitBounds(bounds);
var maxSize = 0;
for (var i = 0; i < arrayAll.length; i++) {
if (maxSize < arrayAll[i].size)
maxSize = arrayAll[i].size;
}
for (var i = 0; i < arrayAll.length; i++) {
var size = Math.round((arrayAll[i].size / maxSize) * 100);
//create MarkerWithLabel
marker[i] = new MarkerWithLabel({
labelInBackground:false,
position: arrayAll[i].loc,
map: map,
title: 'Right-Click to zoom all the way in.\nLeft-Click to zoom to a state level.',
labelAnchor: new google.maps.Point((size * 1.8) / 2, (size / 3)),
labelClass: "googleLabel", // the CSS class for the label
labelStyle: {
width: (size * 1.8) + 'px',
height: (size / 1.5) + 'px',
lineHeight: (size / 1.5) + 'px',
fontSize: (size / 1.5) + 'px'
},
labelContent: arrayAll[i].size,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 0.6,
fillColor: 'gold',
strokeOpacity: 1.0,
strokeColor: '#0000ff',
strokeWeight: 1.0,
scale: size, //pixels
}
});
marker[i].setMap(map);
}
}
{
google.maps.event.addDomListener(window, 'load', initialize);
}
html,
body,
#googleMap {
margin: 0;
padding: 0;
height: 100%;
}
.googleLabel {
color: #000;
font-weight: bold;
text-align: center;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js" type="text/javascript"></script>
<div id="googleMap"></div>
I am trying to create a flight route using google maps with animation. Is it possible to create a polyline path with custom symbol of airplane as in the demo site of http://www.morethanamap.com/demos/visualization/flights
I am able to create a dashed path with animation. The problem is I have am stuck with creating SVG path. I did try to render a Bezier Curves from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths with path given as "M10 10 C 20 20, 40 20, 50 10" but to no avail.
new google.maps.Polyline({
path: [
new google.maps.LatLng(40, -80),
new google.maps.LatLng(-50, 80)
],
geodesic: true,
strokeOpacity: 0.0,
strokeColor: 'yellow',
icons: [{
icon: {
path: 'M 0,-2 0,2',
strokeColor: 'red',
strokeOpacity: 1.0,
},
repeat: '24px'
}],
map: map,
});
The SVG path used on that demo is:
M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-3 2.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684
I pasted that into this demo online svg editor, scaled to fit.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1
};
working example
proof of concept fiddle
code snippet:
function initialize() {
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(20.291, 153.027),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// [START region_polyline]
// Define a symbol using SVG path notation, with an opacity of 1.
var planeSymbol = {
path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
scale: 0.0333,
strokeOpacity: 1,
color: 'black',
strokeWeight: 1,
anchor: new google.maps.Point(300, 300)
};
var lineCoordinates = [
new google.maps.LatLng(22.291, 154.027),
new google.maps.LatLng(21.291, 155.027),
new google.maps.LatLng(20.291, 156.027),
new google.maps.LatLng(45.291, 158.027),
new google.maps.LatLng(51.47238, -0.45093999999994594)
];
var visibleLine = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0.3,
map: map
});
var staticMark = new google.maps.Marker({
map: map,
position: lineCoordinates[0],
icon: planeSymbol,
visible: false // hide the static marker
});
var bounds = new google.maps.LatLngBounds();
bounds.extend(lineCoordinates[0]);
bounds.extend(lineCoordinates[4]);
// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: planeSymbol,
offset: '0'
}],
map: map
});
map.fitBounds(bounds);
animatePlane(line);
// [END region_polyline]
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animatePlane(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 2000;
var icons = line.get('icons');
icons[0].offset = (count / 20) + '%';
line.set('icons', icons);
}, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
You may use a program like Inkscape to draw the image, export is as SVG and copy the path from the source.
Here an example(it takes 3 minutes)
M 8.1326447,0.80527736 C 8.5471666,0.063577346 9.742752,0.030177346 10.052431,0.82497736 C 10.093464,3.0114774 10.134497,5.1980774 10.17553,7.3845774 C 12.760407,8.9653774 15.345284,10.546179 17.930161,12.127079 C 17.930161,12.881779 17.930161,13.636479 17.930161,14.391179 C 15.373077,13.579479 12.815993,12.767779 10.258908,11.956179 C 10.27281,13.280479 10.286713,14.604879 10.300615,15.929279 C 10.8565,16.555879 11.412385,17.182479 11.96827,17.809079 C 12.25527,18.269479 12.437605,19.641079 11.59784,19.085079 C 10.804104,18.802179 10.010367,18.519179 9.21663,18.236279 C 8.3133108,18.620779 7.4099916,19.005279 6.5066724,19.389779 C 6.3952441,18.705879 6.2272708,17.857479 6.8519879,17.359679 C 7.2927717,16.882879 7.7335555,16.406079 8.1743393,15.929279 C 8.1465467,14.604879 8.1187541,13.280479 8.0909615,11.956179 C 5.5894706,12.824879 3.0879797,13.693479 0.58648883,14.562179 C 0.54479393,13.821679 0.50309893,13.081079 0.46140403,12.340579 C 3.0184842,10.717079 5.5755645,9.0935778 8.1326447,7.4700774 C 8.1326447,5.2484774 8.1326447,3.0268774 8.1326447,0.80527736 z