you can\'t draw that!' // Message that will show when intersect }, shapeOptions: { //color: '#bada55' } }, // Turns off this drawing tool rectangle: { shapeOptions: { clickable: false } }, marker: { icon: new MyCustomMarker() } }, edit: { featureGroup: editableLayers, //REQUIRED!! remove: true } }; var drawControl = new L.Control.Draw(options); //if (uid == mapuid) { map.addControl(drawControl); //} if ((curMap == 94) && (uid == 635)) { map.addControl(drawControl); } map.on(L.Draw.Event.CREATED, function (e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { layer.bindPopup('A popup!'); } editableLayers.addLayer(layer); }); map.on(L.Draw.Event.DELETED, function (e) { var type = e.layerType, layer = e.layer; if (type === 'marker') { layer.bindPopup('A popup!'); } editableLayers.removeLayer(layer); }); // map.on(L.Draw.Event.EDITED, function (e) { // var type = e.layerType, // layer = e.layer; // if (type === 'marker') { // layer.bindPopup('A popup!'); // } // editableLayers.removeLayer(layer); // }); map.on('draw:edited', function (e) { objectOut = editableLayers.toGeoJSON(); textOut = JSON.stringify(objectOut); $.ajax({ url: 'api/save_geodata.php', type: "post", //async: false, data: { id: curMap, data: textOut, }, success: function(data) { console.log("geodata saved del"); }, error: function(e) { console.log("geodata not saved"); } }); // var layers = e.layers; // layers.eachLayer(function (layer) { // var shape = layer.toGeoJSON() // var shape_for_db = JSON.stringify(shape); // console.log("edited"); // console.dir(shape_for_db); // }); }); //save map.on('draw:deleted ', function (e) { var layers = e.layers; layers.eachLayer(function (layer) { var shape = layer.toGeoJSON() var shape_for_db = JSON.stringify(shape); console.log("deleted"); console.dir(shape_for_db); //do whatever you want; most likely save back to db }); objectOut = editableLayers.toGeoJSON(); textOut = JSON.stringify(objectOut); //console.dir(textOut); $.ajax({ url: 'api/save_geodata.php', type: "post", //async: false, data: { id: curMap, data: textOut, }, success: function(data) { console.log("geodata saved del"); }, error: function(e) { console.log("geodata not saved"); } }) }); map.on('draw:created', function (e) { var type = e.layerType; var layer = e.layer; var shape = layer.toGeoJSON() var shape_for_db = JSON.stringify(shape); // console.log("shape_for_db"); // console.dir(shape_for_db); objectOut = editableLayers.toGeoJSON(); textOut = JSON.stringify(objectOut); // console.log("editableLayers"); // console.dir(textOut); $.ajax({ url: 'api/save_geodata.php', type: "post", //async: false, data: { id: curMap, data: textOut, }, success: function(data) { console.log("geodata saved"); }, error: function(e) { console.log("geodata not saved"); } }) // var collection = editableLayers.toGeoJSON(); }); map.addControl(new L.Control.Fullscreen()); var NS1style = { "color": " #1b2631", //#ff7800 orange "weight": 5, "opacity": 0.65 }; var FINO2 = { "color": " #1d8348 ", //#ff7800 orange "weight": 5, "opacity": 0.65 }; //console.log(curMap); if (curMap == 2) { $.getJSON("test.json",function(data){ // add GeoJSON layer to the map once the file is loaded console.log("Get JSON"); //console.dir(data); L.geoJson(data, { style: NS1style }).addTo(map); }); $.getJSON("enbv_baltic2.json",function(data){ L.geoJson(data, { style: FINO2 }).addTo(map); }); } let polylines = []; var pl1; let markerRadius = 2; let markerOpacity = 0.5; function randomInteger(min, max) { let rand = min + Math.random() * (max + 1 - min); return Math.floor(rand); } for (var i = 0; i < IMOs.length; i++) { let pointsForJson = []; if (IMOs[i][1].points.length > 0) { for (var k = 0; k < IMOs[i][1].points.length; k++) { let p = IMOs[i][1].points[k]; if (IMOs[i][1].imo == 9278600) { p.lng = parseFloat(p.lng); if (p.lng < 0) { p.lng += 360; } } let color = '#4C0099'; //colors[i]; if (curMap == 68) { let color = '#800080'; //colors[0]; } else { if (typeof IMOs[i][0] !== 'undefined' ) { for (var j = 0; j < a_imos.length; j++) { if (a_imos[j][0] == IMOs[i][0]) { if (curMap > 0) { color = a_imos[j][1].color; } else { color = '#4C0099'; } imoCreated = a_imos[j][1].imoCreated; break; } } } } //console.log("color: " + color); if (ais > 0) { let col_ind = randomInteger(0, colors.length); color = colors[col_ind]; } //icon const markerHtmlStyles = ` background-color: ${color}; width: 1rem; height: 1rem; display: block; left: -1.5rem; top: -1.5rem; position: relative; border-radius: 1rem 1rem 0; transform: rotate(45deg); border: 1px solid #FFFFFF` const icon = L.divIcon({ className: "my-custom-pin", iconAnchor: [-10, -10], labelAnchor: [40, 40], popupAnchor: [40, 40], html: `
` }) if (fromDate.length <= 18) { fromDate = '2019-01-27 08:35:00'; } let eta = ""; let destination = ""; let speed = ""; let course = ""; let heading = ""; let draught = ""; if (p.eta !== null) { eta = "ETA: " + p.eta + "
"; } if ( (p.destination !== 0) && (p.destination !== null) && (typeof p.destination !== 'undefined') ) { destination = "destination: " + p.destination + "
"; } if ( (p.speed !== null) || (p.speed === 0) ) { speed = "speed: " + p.speed + "
"; } if (p.course !== null) { course = "course: " + p.course + "
"; } if (p.heading !== null) { heading = "heading: " + p.heading + "
"; } if (p.draught !== null) { draught = "draught: " + p.draught + "
"; } //console.log("course: " + p.course + " head: " + p.heading + " speed: " + p.speed); let marker, marker2; let radius = 16; let width = 4; let iconSize = 24; if ( (ves_cnt == 1) && (IMOs[i][1].first != 1) ) { radius = 8; width = 1; iconSize = 10; color = '#00F500'; } if (ais > 0) { iconSize = 12; radius = 6; } if (curMap == 68) { radius = 4; width = 2; iconSize = 12; } let ves_course = -2; if (p.course !== null) { if (p.course.length > 0) { ves_course = parseInt(p.course); } } if (p.heading !== null) { if (p.heading.length > 0) { ves_heading = parseInt(p.heading); } } if ( k == IMOs[i][1].points.length - 1) { //console.dir(IMOs[i][1]); let iconurl = 'https://shipinfo.net/imgs/medical.png'; if (IMOs[i][1].type == "Naval Naval Auxiliary") { iconurl = 'https://shipinfo.net/imgs/medical.png'; } else if ( (IMOs[i][1].type == "Подводная лодка") || (IMOs[i][1].type == "Авианосец") || (IMOs[i][1].type == "Военный") || (IMOs[i][1].type == "Десантный корабль") || (IMOs[i][1].type == "Сторожевой Корабль") ) { iconurl = 'https://shipinfo.net/imgs/military_ship.png'; } else if (IMOs[i][1].type == "Container Ship") { iconurl = 'https://shipinfo.net/imgs/container_ship.png'; } iconurl = 'https://shipinfo.net/imgs/vessel_grey.png'; let angle = null; if (p.course !== null) { angle = ves_course; } else if (p.heading !== null) { angle = ves_heading; } else { // base circle icon without any direction //iconurl = 'imgs/vessel_grey.png'; } let marker_opacity = 1; if (IMOs[i][1].type != null) { if ( (IMOs[i][1].type.toLowerCase().indexOf('RMRS') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('cargo') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('container') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('RMRS') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('RORO') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('bulk') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('carrier') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('vl') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('nkk') !== -1) ) { iconurl = 'https://shipinfo.net/imgs/vessel_yellow.png'; } if (IMOs[i][1].type.toLowerCase().indexOf('fish') !== -1) { iconurl = 'https://shipinfo.net/imgs/vessel_cyan.png'; } if ((IMOs[i][1].type.toLowerCase().indexOf('tanker') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('tanker') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('bv') !== -1)) { iconurl = 'https://shipinfo.net/imgs/vessel_red.png'; } if ((IMOs[i][1].type.toLowerCase().indexOf('passanger') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('cruise') !== -1)) { iconurl = 'https://shipinfo.net/imgs/vessel_green.png'; } if ( (IMOs[i][1].type.toLowerCase().indexOf('tug') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('crane') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('supply') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('suport') !== -1) ) { iconurl = 'https://shipinfo.net/imgs/vessel_blue.png'; } if ((IMOs[i][1].type.toLowerCase().indexOf('pleasure') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('yacht') !== -1) || (IMOs[i][1].type.toLowerCase().indexOf('service') !== -1)) { iconurl = 'https://shipinfo.net/imgs/vessel_magenta.png'; } if (IMOs[i][1].type.toLowerCase().indexOf('hidden') !== -1) { marker_opacity = 0.2; } } var shipIconClass = "shipIcon"; if (IMOs[i][1].imo != 'undefined') { shipIconClass = "vesselIcon_" + IMOs[i][1].imo; } var shipIcon = L.icon({ iconUrl: iconurl, //shadowUrl: 'leaf-shadow.png', iconSize: [iconSize, iconSize], // size of the icon //shadowSize: [50, 64], // size of the shadow iconAnchor: [iconSize/2, iconSize/2], // point of the icon which will correspond to marker's location //shadowAnchor: [4, 62], // the same for the shadow popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor }); marker = L.marker([p.lat, p.lng], {icon: shipIcon, rotationAngle: angle, opacity: marker_opacity, riseOnHover: true}).addTo(map); // marker2 = L.circleMarker([p.lat, p.lng], { // color: color, // radius: radius, // opacity: 0.8, // weight: width, // }).addTo(map); let text_lat = parseFloat(p.lat + 0.007); let text_lng = parseFloat(p.lng + 0.007); if ( (IMOs[i][1].name != 'hidden') && (IMOs[i][1].name != 'undefined') ) { var myTextLabel = L.marker([text_lat, text_lng], { icon: L.divIcon({ className: 'text-labels', // Set class for CSS styling html: IMOs[i][1].name }) }).addTo(map); } } else { marker = L.circleMarker([p.lat, p.lng], { color: color, //colors[i], radius: markerRadius, opacity: markerOpacity, }).addTo(map); } //shipinfo.net/find_vessel_Eclipse_IMO-1009613_MMSI-310593000 let vvv = `
`+ IMOs[i][1].name + `
lat: ` + p.lat + `
lng: ` + p.lng + `
` + p.updated + ` UTC
`; marker.bindPopup(vvv).openPopup(); if (typeof(marker2) !== 'undefined') { let vvv = `
`+ IMOs[i][1].name + `
latitude: ` + p.lat + `
longitude: ` + p.lng + `
` + p.updated + ` UTC
`; marker2.bindPopup(vvv).openPopup(); } pointsForJson.push([parseFloat(p.lng), parseFloat(p.lat)]); } } //lines let moCreated = ""; let color = colors[i]; if (typeof IMOs[i][0] !== 'undefined' ) { for (var j = 0; j < a_imos.length; j++) { if (a_imos[j][0] == IMOs[i][0]) { color = a_imos[j][1].color; imoCreated = a_imos[j][1].imoCreated; break; } } } if (IMOs[i][1].points.length > 0) { let stroke = true; let strokeWidth = 3; if ( ( (ves_cnt == 1) && (IMOs[i][1].first == 1) ) || (curMap > 0) ) { opas = 0.7; color = '#6A00DA'; stroke = true; strokeWidth = 3; } else { opas = 0.5; color = '#A1E7FF'; //stroke = false; } let polyline = L.polyline(lngLatArrayToLatLng(pointsForJson), { dashArray: "15,15", dashSpeed: -30 }); polyline.setStyle({ color: color, opacity: opas, stroke: stroke, weight: strokeWidth, }); if ( (curMap != 1) && (curMap != 2) && (curMap != 68) && (curMap != 63) && (curMap != 69) ) { if ( i == (IMOs.length - 1) ) { map.fitBounds(polyline.getBounds()); //map.fitBounds(L.latLngBounds(lngLatArrayToLatLng(pointsForJson))); } } map.addLayer(polyline); } } //map.setZoom(2); if (curMap == 1) { map.setView([35.755182, 15.227854], 3); } if (curMap == 2) { map.setView([51.72321, 3.08227], 3); } if (curMap == 76) { map.setView([51.72321, 3.08227], 3); } if (curMap == 63) { map.setView([60.4511, 22.0361], 3); } if (curMap == 68) { map.setView([25.6014, -92.1736], 3); } if (curMap == 69) { map.setView([51.72321, 3.08227], 3); } if (curMap == 71) { map.setView([25.6014, -92.1736], 3); } if (ais == 5341) { map.setView([-25.049974, 148.267389], 3); } if (ais == 5362) { map.setView([30.432088, -86.344745], 3); } if (ais == 5338) { map.setView([30.432088, -86.344745], 3); } function lngLatArrayToLatLng(lngLatArray) { return lngLatArray.map(lngLatToLatLng); } function lngLatToLatLng(lngLat) { return [lngLat[1], lngLat[0]]; } $('#loading').hide();//} ///////// $("#addShipDB").click(function() { let shipText = $('#shipText').val(); let IMOinput = $('#IMO').val(); let colorVal = $('#colorVal').val(); let shipTextHtml = $('#shipText').html(); let IMOinputHtml = $('#IMO').html(); let colorValHtml = $('#colorVal').html(); //let shipText = $('#shipText').val(); if (IMOinput.length == 7) { //ajax $.ajax({ type: 'POST', url: 'api/add_ship_to_map.php', data: { IMO: IMOinput, comment: shipText, color: colorVal, map: curMap }, success: function(response) { console.log("add ship to map is ok"); //console.dir(response); let input = JSON.parse(response); //$('#addShipDiv').hide(); $('#addShipSucces').append(input.imo + " added
"); //$( input.imo + " added" ).appendTo( "#addShipSucces" ); $('#IMO').val(); $('#IMO').html(); }, error: function(xhr, textStatus, error ){ console.log(xhr.statusText); console.log(textStatus); console.log(error); } }); } else { console.log("wrong IMO"); } //console.log("colorValHtml " + colorValHtml + " shipTextHtml " + shipTextHtml + " IMOinputHtml " + IMOinputHtml); }); $("#addShip").click(function(){ $("#addShipDiv").show(); }); $("#addShipDBcancel").click(function(){ $("#addShipDiv").hide(); $("#addShipDB").hide(); $('#colorVal').val(''); $('#IMO').val(''); $('#shipText').val(''); $('#IMOmessage').val(''); }); $('.icon') .popup() ; $(function () { $("#name").autocomplete({ source: function(request, response) { console.log("ship name autocomplete: " + request.term); request.term = request.term; $.ajax({ url: 'api/find_ship_name.php', type: "post", //async: false, data: { 'name': request.term, //request.term, }, success: function(data) { console.log("success"); console.dir(data); let input = JSON.parse(data); console.dir(input); autocompleteArr = []; input.map( (x, i) => { let val = { "label": x.shipName, "desc": x.shipType, "IMO": x.shipImo, }; autocompleteArr.push(val); }) console.dir(autocompleteArr); response(autocompleteArr); }, focus: function( event, ui ) { $( "#
project" ).val( ui.item.label ); return false; }, error: function(e) { console.log("search name error"); } }) }, select: function( event , ui ) { desc = ui.item.desc; label = ui.item.label; IMO = ui.item.IMO; console.log("selected focus: " + ui.item.label + " desc: " + ui.item.desc); $('#name').html(label + " (" + desc + ")"); $('#name').val(label + " (" + desc + ")"); $("#IMO").val(IMO); $('#name').show(); $('#addShipDB').show(); return false; }, minLength: 3 }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "
" ) .append( "" + item.label + "
" + item.desc + "
" ) .appendTo( ul ); }; }); function imoInputEvent() { var x = document.getElementById("IMO").value; if (x.length < 7) { document.getElementById("IMOmessage").innerHTML = "Номер IMO должен состоять из 7 цифр"; $('#addShipDB').hide(); } else if (x.length == 7) { document.getElementById("IMOmessage").innerHTML = "IMO номер правильный."; $('#addShipDB').show(); } else if (x.length > 7) { document.getElementById("IMOmessage").innerHTML = "Номер IMO должен состоять из 7 цифр, вы ввели больше!"; $('#addShipDB').hide(); } } $(document).ready(function(){ $('.tabmenu .tabitem').tab(); });
Write to us!
We will be happy to advise and answer all your questions.
info@shipinfo.net
© shipinfo.net