How to draw a line with OpenLayers by clicking two points?OpenLayers3 with google map local tiles serverOpenLayers3 change Layer source URL (or replace features loaded from another URL)Confusion in creating vector layerOpenlayers 3 connecting to a wms feed with a different projectionHow to get the geometry type of a WFS vector layer in OpenLayers 3?How to fit an OpenLayers view to an extent that spans the map extent (wrap) or IDL?Labeling function for GeoJSON Layers in Openlayers 3Multiple layers from one WMTS-capabitilies source in OpenlayersOpenLayers WMTS reprojectionopenlayers-automatically adding the layers on clicking dynamic checkboxes without actually specifying all the published layers attributes
What is the opposite of "eschatology"?
Avoiding the "not like other girls" trope?
Rotate ASCII Art by 45 Degrees
Should I tell management that I intend to leave due to bad software development practices?
Unlock My Phone! February 2018
How can I prove that a state of equilibrium is unstable?
Why was Sir Cadogan fired?
How can I deal with my CEO asking me to hire someone with a higher salary than me, a co-founder?
Why are UK visa biometrics appointments suspended at USCIS Application Support Centers?
How badly should I try to prevent a user from XSSing themselves?
How seriously should I take size and weight limits of hand luggage?
GFCI outlets - can they be repaired? Are they really needed at the end of a circuit?
Did 'Cinema Songs' exist during Hiranyakshipu's time?
Is it possible to create a QR code using text?
What exactly is ineptocracy?
Can I hook these wires up to find the connection to a dead outlet?
Car headlights in a world without electricity
Finding the reason behind the value of the integral.
In Bayesian inference, why are some terms dropped from the posterior predictive?
What is a Samsaran Word™?
Why didn't Boeing produce its own regional jet?
Placement of More Information/Help Icon button for Radio Buttons
Machine learning testing data
Sums of two squares in arithmetic progressions
How to draw a line with OpenLayers by clicking two points?
OpenLayers3 with google map local tiles serverOpenLayers3 change Layer source URL (or replace features loaded from another URL)Confusion in creating vector layerOpenlayers 3 connecting to a wms feed with a different projectionHow to get the geometry type of a WFS vector layer in OpenLayers 3?How to fit an OpenLayers view to an extent that spans the map extent (wrap) or IDL?Labeling function for GeoJSON Layers in Openlayers 3Multiple layers from one WMTS-capabitilies source in OpenlayersOpenLayers WMTS reprojectionopenlayers-automatically adding the layers on clicking dynamic checkboxes without actually specifying all the published layers attributes
I've got website with OpenLayers tile layer. I am trying to draw vector line on the map (only one segment between 2 points) on mouse click and to get coordinates of these two points. I read a lot on the Internet, but I could not handle it.
That's my code for adding OSM layer, layer switcher, view:
var view = new ol.View(
projection: new ol.proj.Projection(
code: 'EPSG:3857',
units: 'm'
),
center: [1030534,5690437],
zoom: 12
)
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
)
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
I really have no idea how to make the line-part. I use this
example, but it's hard for me: https://openlayers.org/en/latest/examples/draw-features.html
I'd like to make something like LineString from the example above but only with one segment.
I tried with that, but it's obviously NOT right. As I said - I'm beginner.
var source = new ol.source.Vector(wrapX: false);
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var draw = new ol.Interaction.Draw(
source: source,
type: 'LineString'
);
map.addInteraction(draw);
openlayers line coordinates
New contributor
add a comment |
I've got website with OpenLayers tile layer. I am trying to draw vector line on the map (only one segment between 2 points) on mouse click and to get coordinates of these two points. I read a lot on the Internet, but I could not handle it.
That's my code for adding OSM layer, layer switcher, view:
var view = new ol.View(
projection: new ol.proj.Projection(
code: 'EPSG:3857',
units: 'm'
),
center: [1030534,5690437],
zoom: 12
)
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
)
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
I really have no idea how to make the line-part. I use this
example, but it's hard for me: https://openlayers.org/en/latest/examples/draw-features.html
I'd like to make something like LineString from the example above but only with one segment.
I tried with that, but it's obviously NOT right. As I said - I'm beginner.
var source = new ol.source.Vector(wrapX: false);
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var draw = new ol.Interaction.Draw(
source: source,
type: 'LineString'
);
map.addInteraction(draw);
openlayers line coordinates
New contributor
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
To limit the line to 2 points specifymaxPoints: 2,
as an option when you create the draw interaction
– Mike
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
What is missing is justmap.addLayer(vector)
at the end.
– TomazicM
2 days ago
add a comment |
I've got website with OpenLayers tile layer. I am trying to draw vector line on the map (only one segment between 2 points) on mouse click and to get coordinates of these two points. I read a lot on the Internet, but I could not handle it.
That's my code for adding OSM layer, layer switcher, view:
var view = new ol.View(
projection: new ol.proj.Projection(
code: 'EPSG:3857',
units: 'm'
),
center: [1030534,5690437],
zoom: 12
)
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
)
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
I really have no idea how to make the line-part. I use this
example, but it's hard for me: https://openlayers.org/en/latest/examples/draw-features.html
I'd like to make something like LineString from the example above but only with one segment.
I tried with that, but it's obviously NOT right. As I said - I'm beginner.
var source = new ol.source.Vector(wrapX: false);
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var draw = new ol.Interaction.Draw(
source: source,
type: 'LineString'
);
map.addInteraction(draw);
openlayers line coordinates
New contributor
I've got website with OpenLayers tile layer. I am trying to draw vector line on the map (only one segment between 2 points) on mouse click and to get coordinates of these two points. I read a lot on the Internet, but I could not handle it.
That's my code for adding OSM layer, layer switcher, view:
var view = new ol.View(
projection: new ol.proj.Projection(
code: 'EPSG:3857',
units: 'm'
),
center: [1030534,5690437],
zoom: 12
)
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
)
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
I really have no idea how to make the line-part. I use this
example, but it's hard for me: https://openlayers.org/en/latest/examples/draw-features.html
I'd like to make something like LineString from the example above but only with one segment.
I tried with that, but it's obviously NOT right. As I said - I'm beginner.
var source = new ol.source.Vector(wrapX: false);
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var draw = new ol.Interaction.Draw(
source: source,
type: 'LineString'
);
map.addInteraction(draw);
openlayers line coordinates
openlayers line coordinates
New contributor
New contributor
edited 2 days ago
Vince
14.8k32849
14.8k32849
New contributor
asked 2 days ago
BananaGrapeBananaGrape
83
83
New contributor
New contributor
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
To limit the line to 2 points specifymaxPoints: 2,
as an option when you create the draw interaction
– Mike
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
What is missing is justmap.addLayer(vector)
at the end.
– TomazicM
2 days ago
add a comment |
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
To limit the line to 2 points specifymaxPoints: 2,
as an option when you create the draw interaction
– Mike
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
What is missing is justmap.addLayer(vector)
at the end.
– TomazicM
2 days ago
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
To limit the line to 2 points specify
maxPoints: 2,
as an option when you create the draw interaction– Mike
2 days ago
To limit the line to 2 points specify
maxPoints: 2,
as an option when you create the draw interaction– Mike
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
What is missing is just
map.addLayer(vector)
at the end.– TomazicM
2 days ago
What is missing is just
map.addLayer(vector)
at the end.– TomazicM
2 days ago
add a comment |
1 Answer
1
active
oldest
votes
The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it.
var view = new ol.View(
center: [1030534,5690437],
zoom: 12
)
var source = new ol.source.Vector();
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
),
vector
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var draw = new ol.interaction.Draw(
source: source,
type: 'LineString',
maxPoints: 2
);
draw.on('drawend', function(evt)
// log the coordinates and lon/lat
var coordinates = evt.feature.getGeometry().getCoordinates();
var llCoordinates = evt.feature.getGeometry().clone().transform(view.getProjection(), 'EPSG:4326').getCoordinates();
console.log(coordinates);
alert(JSON.stringify(llCoordinates, null, 2));
);
map.addInteraction(draw);
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
BananaGrape is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317272%2fhow-to-draw-a-line-with-openlayers-by-clicking-two-points%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it.
var view = new ol.View(
center: [1030534,5690437],
zoom: 12
)
var source = new ol.source.Vector();
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
),
vector
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var draw = new ol.interaction.Draw(
source: source,
type: 'LineString',
maxPoints: 2
);
draw.on('drawend', function(evt)
// log the coordinates and lon/lat
var coordinates = evt.feature.getGeometry().getCoordinates();
var llCoordinates = evt.feature.getGeometry().clone().transform(view.getProjection(), 'EPSG:4326').getCoordinates();
console.log(coordinates);
alert(JSON.stringify(llCoordinates, null, 2));
);
map.addInteraction(draw);
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
add a comment |
The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it.
var view = new ol.View(
center: [1030534,5690437],
zoom: 12
)
var source = new ol.source.Vector();
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
),
vector
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var draw = new ol.interaction.Draw(
source: source,
type: 'LineString',
maxPoints: 2
);
draw.on('drawend', function(evt)
// log the coordinates and lon/lat
var coordinates = evt.feature.getGeometry().getCoordinates();
var llCoordinates = evt.feature.getGeometry().clone().transform(view.getProjection(), 'EPSG:4326').getCoordinates();
console.log(coordinates);
alert(JSON.stringify(llCoordinates, null, 2));
);
map.addInteraction(draw);
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
add a comment |
The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it.
var view = new ol.View(
center: [1030534,5690437],
zoom: 12
)
var source = new ol.source.Vector();
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
),
vector
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var draw = new ol.interaction.Draw(
source: source,
type: 'LineString',
maxPoints: 2
);
draw.on('drawend', function(evt)
// log the coordinates and lon/lat
var coordinates = evt.feature.getGeometry().getCoordinates();
var llCoordinates = evt.feature.getGeometry().clone().transform(view.getProjection(), 'EPSG:4326').getCoordinates();
console.log(coordinates);
alert(JSON.stringify(llCoordinates, null, 2));
);
map.addInteraction(draw);
The vector layer needs to be included in the map and you will need to process information from your drawn lines somewhere, the drawend event would be the best place to do that. Views default to EPSG:3857 so you don't need to define it.
var view = new ol.View(
center: [1030534,5690437],
zoom: 12
)
var source = new ol.source.Vector();
var vector = new ol.layer.Vector(
title: 'Line',
source: source
);
var layers = [
new ol.layer.Tile(
source: new ol.source.OSM(),
title: 'Open Street Map'
),
vector
];
var map = new ol.Map(
layers: layers,
target: 'map',
view: view,
controls: ol.control.defaults().extend([
new ol.control.OverviewMap()
])
);
var draw = new ol.interaction.Draw(
source: source,
type: 'LineString',
maxPoints: 2
);
draw.on('drawend', function(evt)
// log the coordinates and lon/lat
var coordinates = evt.feature.getGeometry().getCoordinates();
var llCoordinates = evt.feature.getGeometry().clone().transform(view.getProjection(), 'EPSG:4326').getCoordinates();
console.log(coordinates);
alert(JSON.stringify(llCoordinates, null, 2));
);
map.addInteraction(draw);
answered 2 days ago
MikeMike
2,445139
2,445139
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
add a comment |
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
Thanks a lot! i really appreciate your help :)
– BananaGrape
2 days ago
add a comment |
BananaGrape is a new contributor. Be nice, and check out our Code of Conduct.
BananaGrape is a new contributor. Be nice, and check out our Code of Conduct.
BananaGrape is a new contributor. Be nice, and check out our Code of Conduct.
BananaGrape is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f317272%2fhow-to-draw-a-line-with-openlayers-by-clicking-two-points%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Welcome to GIS SE. As a new user, please take the Tour. Coding questions here are expected to contain code. Please Edit the question to include what you have attempted, with a description of what behavior you are seeing.
– Vince
2 days ago
To limit the line to 2 points specify
maxPoints: 2,
as an option when you create the draw interaction– Mike
2 days ago
Vince, Thanks! I will have it in mind the next time :)
– BananaGrape
2 days ago
What is missing is just
map.addLayer(vector)
at the end.– TomazicM
2 days ago